Loading...

three.js css3d - periodic table

69,816 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
  • Category

  • License

    • Standard YouTube License
  • Song

    • Everyday
  • Artist

    • Carly Comando
  • Album

    • Everyday
  • Licensed by

    • AdRev for Rights Holder (on behalf of Deep Elm); PEDL, ASCAP, Warner Chappell, EMI Music Publishing, UBEM, and 23 Music Rights Societies

Comments • 195

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 171 replies
Hide replies
isochronous
Holy crap man, that's just amazing. The fact that you're doing that with CSS3 is blowing my mind over here. I've been working with CSS for 13 years, programming for 10, and working with JavaScript for 4, and your skills make me green with envy ;) (Granted, I only took a single 3D graphics class, and the most advanced thing I ever did was write a ray-tracer and some GPU shaders, so you undoubtedly have way more experience with graphics development than I do.)
amirali tavoosi
awsome!! Amazing ☺
Ricardo Cabello
Nope. But there is a Dart port: threedart.github.com/three.dart/example/css3d_periodictable/CSS3D_Periodic_Table.html
Noel Barcellos
How awesome, looking forward to seeing this in more things.
Salman Abbas
Well done Ricardo! (and Ipad :-)
Oleksandr Tryshchenko
Great example!
Bala Balasubramaniam
This is cool. I have received my LEAP and tyring to learn through it.Can you please send me the html and other assets for three.js periodic table example tied with leap motion? sbalasubramaniam@ebay.com Thanks in advance...
t0dmacher
Nifty stuff. I want it to be my GUI.
Michael Gaio
Awesome. Thank you!
When autoplay is enabled, a suggested video will automatically play next.

Up next


to add this to Watch Later

Add to

Loading playlists...