Loading...

three.js css3d - periodic table

64,635 views

Loading...

Loading...

Loading...

Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Published on Oct 28, 2012

Comments • 202

Ricardo Cabello
Some weeks ago some people pointed me to +Steve Newcomb's "game engine" famo.us ($1.1M funding). If you haven't seen it, here's their presentation at TechCrunch Disrupt: http://techcrunch.com/2012/09/10/famo-us-is-a-gaming-engine-for-3d-interfaces/ The way it was presented, "this is not X, this is not Y... but I'm not going to tell you what it is" reminded me to Euclideon videos: Unlimited Detail Real-Time Rendering Technology Preview 2011 [HD] Back to famo.us "game engine". Ok, so It's not WebGL and is not Canvas. It can only be CSS3D it seems to run without plugins in the browser. Also, if you look at the video carefully, only when the demo is running as an app the elements use additive blending, when it's running on the browser there is no additive blending. Now, lately I've been working on the CSS3DRenderer for +three.js as a solution for the current iOS situation. So, I just got curious and decided to try to replicate the demo and see if it could be CSS3D. For testing the waters I first did a simple panorama test: http://threejs.org/examples/css3d_panorama.html Performance seemed pretty decent. So next I spent quite a while writing the array with all the elements (I can't believe they made me memorise all these in school...) and after a bit of actual code I got something pretty similar: http://threejs.org/examples/css3d_periodictable.html Yeah, I didn't bother to replicate all the interaction, neither to add the Ironman picture on the background. I guess it's good enough as it is. But hey, while I was at it I made TrackballControls touch-friendly ^^ Attached is a video of how it runs on an iPad 2. (Sorry for the cheesy music, but the original video had the same.)
View all 180 replies
Hide replies
amirali tavoosi
awsome!! Amazing ☺
Tryshchenko Oleksandr
Great example!
Michael Gaio
Awesome. Thank you!
Dick
Wow, Amaizing animation!
Rashad Glover
Thank so much for this. I'm going to study the hell out of this.
朱浩
o , i find it. THNK YOU!
朱浩
Amazing ,where can I find this code?
Norman Santiago
is their a way to change the characters in the box when you click the button? 
Mauricio Poppe
mind = blown
Advertisement
When autoplay is enabled, a suggested video will automatically play next.

Up next


to add this to Watch Later

Add to

Loading playlists...