Tip: Embed an interactive 3D model

(moshe_caine) #21

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

(kostas) #22

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

(moshe_caine) #23

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!

(kostas) #24

ok i ll do that…thank you for your time

(Joe Moretti) #25

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?

(kerguelen) #26

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

(Joe Moretti) #27

Hi Kerguelen,

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


(kerguelen) #28

You have to embed this code to the html of the div rectangle on the scene :
canvas id=“cv” width=“640” height=“480”>
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’);

(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

(Joe Moretti) #29

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

Many thanks again


(kerguelen) #30

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

(Greg) #31

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?


(kerguelen) #32

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

(michael) #33

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.

(kerguelen) #34

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

(michael) #35

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

(Randy Power) #37

I like it!