3d animations of WebGL

The previous articles were static, and here's how to get things moving and learn to use performance monitors to monitor performance.

And if the object is to move, we actually have two methods, the first is to let the object really move, and the other is to move the camera so that the object is relatively moving. In addition, in fact, in the process of moving the object, we are constantly by calling Renderer.render (scene, camera) This function is implemented, then how to constantly call this function? This requires the use of the Requestanimationframe function, which takes a function as a parameter, and will be called 60 times per second, then the final screen will be rendered 60 times within a second, so that the animation can be formed.

First, the object does the absolute movement

First, let's move the object up, as shown below, as an animation that moves the object:

<! DOCTYPE html>"en">"UTF-8"> <title>three.js</title> <style> *{margin:0; padding:0; }    </style> <script src="./three.js"></script>varScene =Newthree.        Scene (); varAxes =NewThree. Axeshelper ( +);        Scene.add (axes); varCamera =NewThree. Perspectivecamera ( -, Window.innerwidth/window.innerheight,1, +); Camera.position.x= -; CAMERA.POSITION.Y= -; Camera.position.z= -; Camera.up.x=0; CAMERA.UP.Y=0; Camera.up.z=1;//camera.up.z = 1, so the result of rendering is z-axis upward. Camera.lookat (scene.position); varRenderer =Newthree.        Webglrenderer (); Renderer.setclearcolor (0x111111);        Renderer.setsize (Window.innerwidth, window.innerheight); varCubegeometry =NewThree. Cubegeometry (Ten,Ten,Ten); varMeshcube =NewThree. Meshbasicmaterial ({color:0xff0000}); varCube =Newthree.        Mesh (Cubegeometry, Meshcube); Cube.position.x=0; CUBE.POSITION.Y=0; Cube.position.z=0;        Scene.add (Cube);        Document.body.append (renderer.domelement); varIsdestination =false; function animation () {varInterval =5; if(!isdestination) {cube.position.x= Cube.position.x +interval; } Else{cube.position.x= Cube.position.x-interval; }            if(cube.position.x = = the) {isdestination=true; }            if(cube.position.x = =0) {isdestination=false;            } renderer.render (scene, camera);        Requestanimationframe (animation);    } animation (); </script></body>
That is, first create the scene, then create the axis and join the scene, then create the camera, note that the camera accepts more parameters, and the camera needs to specify the position position and up position, and use the LookAt function, next create a renderer, specify the background color and width, height, and then create an object , the renderer needs to be added to the document.body, followed by an animation, and then run. However, we can find that although the above code is done, but the encapsulation is not good, we can try to encapsulate it in a function, as follows:
<! DOCTYPE html>"en">"UTF-8"> <title>three.js</title> <style> *{margin:0; padding:0; }    </style> <script src="./three.js"></script>varscene; function Initscene () {Scene=Newthree.                    Scene (); }        varaxes; function initaxes () {axes=NewThree. Axeshelper ( +);        Scene.add (axes); }        varcamera; function Initcamera () {camera=NewThree. Perspectivecamera ( -, Window.innerwidth/window.innerheight,1, +); Camera.position.x= -; CAMERA.POSITION.Y= -; Camera.position.z= -; Camera.up.x=0; CAMERA.UP.Y=1; Camera.up.z=0;        Camera.lookat (scene.position); }        varrenderer; function Initrenderer () {renderer=Newthree.            Webglrenderer ();            Renderer.setsize (Window.innerwidth, window.innerheight); Renderer.setclearcolor (0x111111);        Document.body.append (renderer.domelement); }        varCube; function Initobject () {varCubegeometry =NewThree. Cubegeometry (Ten,Ten,Ten); varMeshcube =NewThree. Meshbasicmaterial ({color:0xff0000}); Cube=Newthree.            Mesh (Cubegeometry, Meshcube); Cube.position.x=0; CUBE.POSITION.Y=0; Cube.position.z=0;        Scene.add (Cube); }        varIsdestination =false; function animation () {varInterval =5; varDestination = $; varDirection ="y"; if(!isdestination) {Cube.position[direction]+=interval; } Else{Cube.position[direction]-=interval; }            if(Cube.position[direction] = =destination) {isdestination=true; }            if(Cube.position[direction] = =0) {isdestination=false;            } renderer.render (scene, camera);        Requestanimationframe (animation);            } function Threestart () {initscene ();            Initaxes ();            Initcamera ();            Initrenderer ();            Initobject ();        Animation ();    } threestart (); </script></body>
As shown above, through the function encapsulation, the program logic is better, and only exposes the necessary variables such as scene, camera, axes, renderer, and other variables do not pollute the global, and the final animation function, We define direction as "X" so that we can control the axis of the cube motion through the modifications here, which is the feature of the JavaScript invocation attribute. Finally, we unify the initialization call function in Threestart, so that the project can be opened through the Threestart function call, and the resulting effect is as follows:
Second, the camera to do absolute movement
As shown below:
<! DOCTYPE html>"en">"UTF-8"> <title>three.js</title> <style> *{margin:0; padding:0; }    </style> <script src="./three.js"></script>varscene; function Initscene () {Scene=Newthree.                    Scene (); }        varaxes; function initaxes () {axes=NewThree. Axeshelper ( +);        Scene.add (axes); }        varcamera; function Initcamera () {camera=NewThree. Perspectivecamera ( -, Window.innerwidth/window.innerheight,1, +); Camera.position.x= -; CAMERA.POSITION.Y= -; Camera.position.z= -; Camera.up.x=0; CAMERA.UP.Y=1; Camera.up.z=0;        Camera.lookat (scene.position); }        varrenderer; function Initrenderer () {renderer=Newthree.            Webglrenderer ();            Renderer.setsize (Window.innerwidth, window.innerheight); Renderer.setclearcolor (0x111111);        Document.body.append (renderer.domelement); }        varCube; function Initobject () {varCubegeometry =NewThree. Cubegeometry (Ten,Ten,Ten); varMeshcube =NewThree. Meshbasicmaterial ({color:0xff0000}); Cube=Newthree.            Mesh (Cubegeometry, Meshcube); Cube.position.x=0; CUBE.POSITION.Y=0; Cube.position.z=0;        Scene.add (Cube); }        varIsdestination =false; function animation () {varInterval =1; if(!isdestination) {camera.position.x-=interval; CAMERA.POSITION.Y-=interval; Camera.position.z-=interval; } Else{camera.position.x+=interval; CAMERA.POSITION.Y+=interval; Camera.position.z+=interval; }            if(camera.position.x = = -) {isdestination=true; }            if(camera.position.x = = -) {isdestination=false;            } renderer.render (scene, camera);        Requestanimationframe (animation);            } function Threestart () {initscene ();            Initaxes ();            Initcamera ();            Initrenderer ();            Initobject ();        Animation ();    } threestart (); </script></body>
The idea here is also very simple, is to give the camera an animation, the effect is as follows:
OK, here we understand the two ways to make the scene move, but how do we monitor their performance, and here's what to say.
Third, performance evaluation
　　
3d animations of WebGL