Twaver 3D periodic table of chemical elements

Some people have already made the periodic table of chemical elements for the 3D web edition. The cool effects and new techniques have been favored by many fans and are eager to study and follow suit. Someone even gave up everything and threw it at this candle. Instead, they always thought of the oppo advertiser, actress, and said, "resign to travel! Do you dare ?"

I don't dare, but it takes a few hours to use twaver. So I always wondered: Isn't it just a tour?

This 3D periodic table has made some improvements: Chinese characters and Pinyin pronunciations have been added to the cards, and you know why-a few programmers dare to read these Chinese characters out loud. Fortunately, most of the main parts of each word still know each other. You can whisper about the number of characters, and there is much less embarrassment when you add pinyin. In addition, the shape layout and special effects are also enriched. For details, see the video connection below.

Technically, the idea of using twaver 3D is slightly different. At first, this program was developed using HTML5, css3, webgl, three. JS, Tween. JS, and other technologies. You don't need to worry about using twaver, but simply a mono. JS is almost done. The technology is still webgl + JS, but css3 and other frameworks are not used. Both results and efficiency are good.

Implementation is not very difficult. The general idea is as follows:

1. Define the periodic table of chemical elements using arrays. Including numbers, Chinese characters, Pinyin, numbers, and English letters. Then, the image card corresponding to each element is dynamically generated in the memory and converted to a memory URL string in base64 format. Pay attention to the format, transparency, color, and other details of the image;
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 surfaces are transparent;
3. Listen to mouse events. When the mouse over each object, let the cube shine; when you click the object, let the cube animation reverse a circle;
4. Calculates the spatial coordinates corresponding to several shape la S and records 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, place all cubes in the corresponding shape and enable the animation mechanism;

Pay attention to the following precautions in actual code:

1. Animation: when the first animation has not been completed yet and you click another button to execute the new animation, you must first determine whether the animation is currently running and stop it in time. At the same time, you also need to determine whether to restore the value to the initial value or the value set for the normal animation end. Otherwise, the animation may confuse the position and angle of the card.
2. Layout: sphere, spiral, random, and other spatial points are actually well calculated. In particular, when people start to look for a spherical surface with a radius of R, they may find N points evenly distributed, and find the coordinates of each point ?" Such a question. This will complicate the problem. Because simple visual layout does not require extremely rigorous positional values, you can insert the radial and horizontal slices of the ball;
3. Texture: At first, we may think that the program uses 100 small images for texture. But in fact, since the difference between each card is only text, it can be dynamically generated in the memory. This speed saves the time required for downloading images online and saves the trouble of maintaining images. At the same time, text, images, and other styles are easier to control. This is also a benefit of the HTML5 canvas technology.
4. Object orientation: During the layout process, the rotation and orientation of each card are considered. For example, if the shape is spherical, each card must face the outer direction of the sphere center's transmitting line, and the spiral card must face the horizontal outer direction. Computing these coordinates and angles requires a lot of mathematical operations. It is enough for everyone to work for a while just to convert the coordinate system and the Cartesian coordinate system. Twaver is simple: each object can be directly lookat a point. For example, for a spherical card, you only need to execute node. lookat (0, 0) for each frame of the animation, right? Not exactly. In this way, when lookat is in the center, isn't the "ass" going out? The words displayed by the user are the back of the card and are reversed. To solve this problem, we should make it look twice the coordinates of its own, that is, the outer side of the center of the radiation: node. lookat (x * 2, y * 2, z * 2.
5. Glow. The mouse over each object will see the light. The mouse over is in the halo position, but the over event is not triggered. How is this done? It's actually a little trick. You can look at the program and study it yourself.

Code snippet for generating memory images:

1	VaR url = canvas. todataurl ("Image/PNG");

2	Node. setstyle ('Front. M. texture. image', URL );

Code snippet for calculating spherical layout coordinates:

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 );

Programs and source code have been in twaver mono design products, interested friends can log on to the online web site www.mono-design.cn or download the product package. Try it!