Real 3d in html / javascript / pv3d

Hello everyone,

In the previous post I’ve mentioned that it could be possible to use papervision 3d and ExternalInterface to create 3d in HTML …

..well that wasn’t too hard to imagine when I’ve found out that it is possible to get coordinates of any vertex of a pv3d object you want - using : “..geometry.vertices[index].vertex3DInstance.attribute “..so I did it..

It’s a bit “proof of concept” idea - it of course ‘doable’ rather than ‘usable’ (too slow) but that didn’t put me off

You can see the test movies right here (or by clicking the large image above). Click the embed button first and then wait for the flash to load. I did it on purpose - because it is processor heavy.

You can download the complete source! here.

So how does it work?

It’s described in the sources but shortly:

- creates a whole pv3d environment with a simple cube, a camera and so on…

- dynamically creates html content then used to animate (simple divs with text),

- creates communication (see the html source) between js and as3,

- uses Tweener for animation yep - that’s a cool part:),

- the pv3d cube is a fake all the time - it exists but it’s not really visible - the coordinates are passed to html objects using the method described in the beginning of this post,

What could be done with it? 

- a lot! You could do a whole menu/website with it - as long as you don’t use too many items on the stage. It’s very easy to add full mouse interaction to it using the same methods I used in the demo. It’s also very easy to modify the 3d environment and steer the camera from js Use your imagination!

I hope you like the little demo - comments are welcome!

FLAIM

*** UPDATE

Please use the code from my newer post about the 3dHTML - it’s optimized and works significantly faster.