TWaver version 3D periodic table of chemical elements

A 3D web version of the periodic table of chemical elements has been made for a long time. The cool effects and fresh techniques were once regarded as gods by many fans, and they were eager to study and imitate. Some people even gave up everything and threw themselves at this candle, and they couldn't help but think of the OPPO ad heroine dragged with contempt: "Resign to travel! Do you dare?"

I wouldn't dare, but it didn't take hours to do one with TWaver. So I keep thinking: why don't you just take a tour, as for what?

Some improvements have been made to this 3D periodic table: Chinese characters and pinyin pronunciations have been added to the cards, and the reason is that you know - very few programmers dare to read these Chinese characters aloud. Fortunately, most of the main parts of each word are known, so I can whisper it a little bit, and adding pinyin will reduce a lot of embarrassment. In addition, the shape layout and special effects are also enriched a bit. For details, please see the video link below.

Technically speaking, the idea of ​​doing it with TWaver 3D is slightly different. At first, this program was made online using HTML5, CSS3, WebGL, THREE.js, TWEEN.js and other technologies. Using TWaver doesn't have to be so troublesome, and it's almost done with a single mono.js. Technically still WebGL+js, but without CSS3 and other frameworks. The effect and efficiency are very good.

It is not difficult to implement, and the general idea is as follows:

1. Use arrays to define the data of the periodic table of chemical elements. Including numbers, Chinese characters, pinyin, numerical values, English and so on. Then, the picture card corresponding to each element is dynamically generated in memory, and converted into a memory url string in base64 format. Pay attention to the format, transparency, color and other details of the picture;
2. Create a new 3D cube for each chemical element and map the memory image to the front of the cube. The thickness of the cube is 0, and the other faces are transparent;
3. Listen for mouse events. When the mouse over each object, make the cube glow; when the object is clicked, make the cube animation reverse a circle;
4. Calculate the spatial coordinates corresponding to several shape layouts and record them in the client attribute table of each cube in advance. For example: node.setClient('grid',{x:100,y:340});
5. Put a few buttons, after each button is clicked, let all the cubes go to the position of the corresponding shape, and enable the animation mechanism at the same time;

In the actual code, also pay attention to some precautions:

1. Animation: When the first animation has not been executed, and the user clicks another button to execute a new animation, it is necessary to first determine whether there is an animation currently running, and stop the animation in time. At the same time, it is also necessary to determine whether the value needs to be restored to the initial value or the value set by the normal end of the animation. If you don't handle it carefully here, it may cause the animation to confuse the position and angle of the card.
2. Layout: Space points such as spherical, spiral, random, etc. are actually very easy to calculate. Especially for spherical layouts, people may start looking for questions such as "evenly spread n points on a spherical surface of radius r, and find the coordinates of each point?" This complicates the problem. Because a simple visual layout does not require a particularly rigorous position value, it is sufficient to roughly slice the ball radially and horizontally for numerical insertion;
3. Textures: At first, we might think that the program uses 100 small images for textures. But in fact, since the difference between each card is only text, it can be dynamically generated in memory. This fast speed saves the time of downloading pictures from the network and the trouble of maintaining pictures, and at the same time, styles such as text and pictures are easier to control. This is also the benefit that HTML5's canvas technology brings to everyone.
4. Object Orientation: The rotation and orientation of each card is an issue to consider during layout. For example, for a sphere, each card should face outwards from the emission line at the center of the sphere, spiral cards face outwards horizontally, and so on. Calculating these coordinates and angles requires a lot of mathematical operations, and it is enough for everyone to be busy for a while just to find the conversion between the coordinate system and the rectangular coordinate system. And using TWaver is simple: each object directly lookAt a point on the line. For example, for spherical cards, each frame of animation only needs to execute: node.lookAt(0,0,0), right? Not quite right. In this way, lookAt to the center point, doesn't the "butt" face outwards? What the user sees is the back of the card, which is reversed. The solution is also simple. It should lookAt the place where its own coordinates are twice, that is, outside the radial line of the center of the circle: node.lookAt(x*2, y*2, z*2), this is right.
5. glow. Mouse over each object, you will see the glow. The mouse over is in the halo position, but the over event will not be triggered. How is this done? In fact, it is also a little trick. You can look at the program and study it yourself.

Generate memory image code snippet:

1	var url = canvas.toDataURL("image/png");

2	node.setStyle('front.m.texture.image',url);

Code snippet for spherical layout coordinate calculation:

1	var radius=1000;

2	var phi = Math.acos( -1 + ( 2 * index ) / total );

3	var theta = Math.sqrt( total * Math.PI ) * phi;

4	var x = radius * Math.cos( theta ) * Math.sin( phi );

5	var y = radius * Math.sin( theta ) * Math.sin( phi );

6	var z = radius * Math.cos( phi );

The program and source code are already in TWaver's MONO DESIGN product, and interested friends can log on to the online website www.mono-design.cn or download the product package. Try it now!