Tip: Embed an interactive 3D model

(kerguelen) #1

Hi !
I just wanted to share this trick to embed an interactive 3D model into Hype.
This also could be nice to extend the possibilities of this by, for example, being able to create buttons on the document to switch to special position on the model, change definition, background, texture…
Any ideas to make this example better is welcome :wink:
The Hype document can be downloaded here :
Embed3DModel.hype.zip (1.8 MB)

Paid commission
(Olof Pock) #2

You can do this by parameterize methods like replaceScene(scene). I’m not sure how to trigger this from Hype, because JSC3D Viewer is laying in a canvas.
The idea of an embedded interactive 3D model in Hype is also what I’m looking for. Would love to use a Unity scene in Hype let the user play with them.

3D object frame by frame with jQuery reel
(kerguelen) #3

Hi Olof,
My programmation skills are not good enough to get deeper into this sort of customization.
Do you mean using canvas would prevent communication between the 3D module and the Hype document ?
Check this example (http://jsc3d.googlecode.com/svn/trunk/jsc3d/demos/bmw.html)
Apparently, you can even change texture of parts of the model in runtime (a bit difficult for me to understand how it works)

(Markus Bjerre) #4

Nice, I’ve also used the jquery reel but it would be really cool to have a zoom function, perhaps adding a button next to the div to zoom in and out. Any idea on how to do this with the code you’ve used?


(kerguelen) #5

Hi Markus,
Unfortunately, I’m not really into programming even if I did manage to use that code. I wish I could allow the model to rotate only along one axis.
If anyone has solutions, I’m interested in the many ways to adapt this code :slight_smile:

(moshe_caine) #6

Im not a programmer either. However, I’ve been uploading my 3d models to SketchFab, which uses web-GL, and using the embed code to place the 3d inside an HTML widget. Works pretty well, though of course it depends on web connection.


Hi Kerguelen, this is a good post and have almost replicated it from your file. One thing that puzzles me is the ‘div’ object. Is this just a rectangle called ‘div’ that contains the HTML widget or is it something else. I couldn’t find reference to it in the inspector. I’ve copied all the js files from the jsc3d site and all seems ok on that front. Good stuff, keep up the good work.

(kerguelen) #8

Hi Geoff60. That’s it. Div is a simple rectangle called div with an HTML widget :slight_smile:


Hi Kerguelen, thanks, I thought as much but just wanted to check and thanks for posting on such an interesting topic. Geoff

(Andrew) #10

3dteaser.hype.zip (205.3 KB)

Very basic 3d cube, used as a menu. You could do much more with it, but i once I got this far I really did not inspire myself. Good starting point though.

This only uses CSS and HTML5, with of course, HYPE 3 Pro :smile:

(Greg) #11

That is awesome Andrew.

(kerguelen) #12

Oh ! That’s a really really good job !!

(Andrew) #13

Ill do some more tomorrow, I have had a few ideas while watching telly and thinking and will repost it. I will also comment more of the scripts to make it easier for new folk to read it. I will add a shadow too, so it looks better :smile:

(kerguelen) #14

That would be great ! Are you using the same technique I wrote about in the opening of this post ?

(Andrew) #15

I do not think so, everything is CSS with a bit of jQuery to move it round. I used it on a project ages ago, but not in Hype, and saw the post about 3D, so just wrote what I remembered. I am a core coder than a designer, so I’m useless at making things pretty without a detailed map :slight_smile:

(Andrew) #16

Here is another for Star Wars fans :smile:

spaceLanding.hype.zip (211.0 KB)

(Martini) #17

Hey moshe_caine,

could you show me your result with an upload of your hype-file?

Thank you!!!

(moshe_caine) #18

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

(kostas) #19

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…

(kostas) #20

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??