X
A WebGL version of mrdoob's, fabulous three.js CSS3D periodic table.

About: It's a 3D periodic table. The table is up-to-date as of June 2016 including the naming changes announced by the IUPAC for elements 113, 115, 117 and 118.

Basic navigation: Click a tile to zoom in on it, scroll in or out using the scroll wheel on your mouse. Click and drag anywhere other than on a tile to rotate the tiles around the sphere at the center.

Layouts: There are four tile layouts, Table, Sphere, Helix and Grid. Click the layout you want from the menu in the bottom left and the tiles will tween away to the new layout.

Face Me: Clicking this button will toggle on or off the facing feature. When on, the tiles to face you, regardless of where you move.

Reset View: Resets the view for that layout.

Stats Display: Shown in the top left corner, this shows how well your device is running this app. Higher FPS is better, from my testing it runs much better in Chrome (60FPS) than it does in FireFox (42FPS) on the same hardware, zooming is also much smoother in Chrome.

Known issues: 1. The 'raytracer' used to target and select the tiles 'sees through' the menu and stats windows. If you click a menu item with a tile beneath it, you'll zoom to the tile instead on clicking the menu item.
2. When you pan around by clicking and dragging or dragging a finger. the camera axis tilts. To reposition the axis, while dragging rotate your cursor or finger around in either a clockwise or counter-clockwise circular direction to adjust the axis.
3. The lighting changes in Face Me mode, all the tiles receive the same "amount" of light when facing the camera.

To Do List:
1. Clean up the code now that I have a better understanding of JS.
2. Fix the camera tweening.
3. Add a legend for the group colors.
4. Re-write the loading screen function.
5. Make the menu out of 3D objects so they target properly.