Tip: Embed an interactive 3D model

Hi Martini.
No problem.
Here’s a simple example.Hype_3D.hype.zip (10.0 KB)

2 Likes

Is there a way to upload a dae file on a web server and run it from there using an iframe???Sorry for my ignorance my coding skills are low…

1 Like

yes but then you files are in public…if you dont want any one to sse your model how can you do that???any suggestions??

In Sketchfab you can determine whether your 3D model is public or
private.So that should not be a problem.

thank you for ypur answer. Even if you dont have the pro version?

Ah… I didn’t think of that. I’m not sure, as I have the pro version.
I suggest you check with the folks at Sketchfab. They’re really nice!

ok i ll do that…thank you for your time

Hi - would it be possible to embed a collada file into this Hype project so that it could be rotated and explored when exported as a widget? And if so could someone post an example of how to do so please?

Hey
You can try to load the exemple in the first post and examine how it is done

Hi Kerguelen,

thank you for the reply.
I did, I DLd it but cant see how or where to place a DAE file?

J

You have to embed this code to the html of the div rectangle on the scene :
canvas id=“cv” width=“640” height=“480”>
/canvas>
script type=“text/javascript” src=“jsc3d.js”>
script type=“text/javascript” src=“jsc3d.touch.js”>
script type=“text/javascript”>
var viewer = new JSC3D.Viewer(document.getElementById(‘cv’));
viewer.setParameter(‘SceneUrl’, ‘${resourcesFolderName}/Erwan.obj’);
viewer.setParameter(‘BackgroundImageUrl’, ‘${resourcesFolderName}/Tour.jpg’);
viewer.setParameter(‘RenderMode’, ‘texturesmooth’);
viewer.setParameter(‘Definition’, ‘high’);
viewer.setParameter(‘InitRotation12, InitRotation25, InitRotation289’);
viewer.init();
viewer.update();
/script>

(please add < before every “script” and “/canvas” and "/script"
But I checked and this works only with .obj files. You’ll have to convert your DAE to an .obj

2 Likes

Thank you for the detailed reply! I will give this a go.

Many thanks again

J

BTW, you can also try this.
And if you manage to adapt it to Hype, I’ll be happy to know !

1 Like

Great stuff. I tried it and it worked with my .obj models. I was wondering is there a way to improve rendering quality in the code. I noticed it says in the inner HTML ‘Definition’, ‘high’’. Can this be changed to better definition?

Thx
Greg

Sorry, Greg, I’m afraid it’s the best quality available

Hey guys, apologies for my ignorance but I used the very first example Hype project and replaced the .obj with one of my own and in the preview there was no .obj, just a background. Is there something obvious I’m missing? I’m alright at design but code is something I’m still learning.

Hi @michaelinbritain

In Hype, select the grey rectangle on the scene, click on the little round icon with a pen just below the rectangle. Your .obj’s name should be written among other code in the code that appears in the window :

        viewer.setParameter('SceneUrl',         '${resourcesFolderName}/Erwan.obj');

Also check if your model has texture

Thanks mate I’ll try this and let you know if it works.

Here is a post I did elsewhere using three.js in Hype. Last message has an example of using a .obj.

If this helps

1 Like

I like it!