I was amazed by Mr.doob's periodic table example, so I decided to do something more on it. First thing comes to my mind is the ability to select each different element. Then you can click on the element and make it flip. It will show a sample (actually is a QTVR movie from PeriodicTable.com, only embed in top three rows) of that particular element. You can rotate the sample in 360 degrees just like 3D object.

3D Elements Visualization



Additionally, you can change the shape of periodic table to make it a shpere or cone. Well, it takes some time to remember all the parametric equations of different shape. But it is really helpful to make a spatial manipulation, which I also used in atomic animation using Three.WebGLrenderer.

Helix Transformation



Cone Transformation



3D Atom Model

The tricky part is to render CSS3D and WebGL at the same time, so I use two renderers to solve the problem and they work quite well. I am still working on how to visualize the behavior of atom. Here is the example of what I am doing.


Periodic Table using three.js

DEVELOPMENT SCALE
Individual
SKILLS USED
WebGL using ThreeJS, HTML5/CSS3, QuickTime VR
SPECIAL THANKS:
Tweaked from Mr.doob's ThreeJS example
QuickTime VR from PeriodicTable.com