With the rapid development of TWaver3D, more and more various functions are constantly being strengthened, including a great improvement in performance (refer to here ), the ease of use and functions of the 3D editor are continuously enhanced (you are welcome to apply for a trial), The addition of various special effects, special effects are the protagonist of this article.
For the continuous development of UI technology and more and more discerning users, various special effects have become an indispensable requirement; maybe you are distressed by the needs of customers, but don't worry, using TWaver3D is just right These troubles can be solved.
To use a popular sentence to say: TWaver3D is so self-willed.
This article is about environment mapping.
It doesn't matter if you don't understand what environment mapping is. In fact, you can imagine this effect as a mirror in the real world. The mirror can map the surrounding environment, and the content of the mapping varies with the viewing angle. .
In TWaver3D, the implementation is not difficult, just a few lines of code. As follows, let's put a skybox first, the code is very simple, just use cube to add six textures:
var skybox = new mono.Cube(5000,5000,5000);
skybox.setStyle('m.side','back');
skybox.setStyle('m.texture.image',['./images/posx.jpg','./images/negx.jpg','./images/posy.jpg','./images/negy.jpg','./images/posz.jpg','./images/negz.jpg']);
Then add a small cube to the skybox and set the environment map
var cube = new mono.Cube (200, 200, 200);
cube.setStyle('m.envmap.image',['./images/posx.jpg','./images/negx.jpg','./images/posy.jpg','./images/negy.jpg','./images/posz.jpg','./images/negz.jpg']);
Add both skybox and cube to the scene, the final effect is as follows:
(The gif image is large, and it is a bit stuck when it first loads, please be patient.)
In practical applications, this technology can realize mirrors, floors with reflective effects, walls, etc.
Of course, in many cases, the surface of real objects is not completely smooth, but rough, such as rough frosted glass outside some buildings, etc. To achieve this effect in TWaver3D, only the normal vector of the surface is required. Just add the perturbation, and the implementation is very simple. To prepare a perturbed picture, you can just use a single code:
cube.setStyle('m.normalmap.image','../demo/images/normalmap.png');
Final renderings:
Of course, if you think the above disturbance is relatively large, you can adjust it by the following parameters:
cube.setStyle('m.normalScale',new mono.Vec2(0.05,0.05));
Changed renderings:
Finally, a practical example: