"WebGl" Threejs implements a simple animation-bouncing balls

In this case, we will briefly animate the motion Picture (animation). Just like the cartoon principle, the essence of animation is to use the visual persistence of the human eye, quickly transform the picture, resulting in the illusion of the object in motion. For the Three.js program, the implementation of the animation is also achieved by redrawing the screen several times per second.

To measure the screen switching speed, the concept of fps (Frames per Second) is introduced, which is the number of times per second that the screen is redrawn. The greater the FPS, the smoother the animation effect, when the FPS is less than 20 o'clock, it is generally possible to feel the picture of the card lag phenomenon.

So is the FPS bigger and better? In fact, it may not. When the FPS is large enough (for example, to reach 60), and then increase the number of frames the human eye will not feel a noticeable change, but correspondingly will consume more resources (such as the film will need to be longer, or computer refresh screen needs to consume computing resources, etc.). Therefore, choose a moderate fps.

NTSC standard TV FPS is the 30,pal standard for TV fps is 25, and the movie FPS Standard is 24. For Three.js animations, the general fps is preferable between 30 and 60.

SetInterval method

If you want to set a specific FPS (though strictly speaking, even if you use this method, JavaScript does not guarantee the accuracy of the frames), you can use the method defined by the JavaScript DOM:

setInterval(func, msec)

funcThis is a function that msec executes every millisecond, and if you func define a function that redraws the picture, you can animate the effect. The setInterval function returns a id , if you need to stop redrawing, you need to use the clearInterval method, and pass in that id , the specific practice is:

Requestanimationframe method

Most of the time, we don't care how long it takes to redraw it, and it's good to use the Requestanimationframe method. It tells the browser to call the specified function at the appropriate time, which can usually reach 60FPS.

How to choose

setIntervalrequestAnimationFramethe difference between the method and the method is more subtle. On the one hand, the most obvious difference is that FPS setInterval can be set manually, and requestAnimationFrame fps will be set automatically, but on the other hand, even if it is setInterval not guaranteed to perform at a given FPS, it is likely to be below the set value when the browser is busy. When the browser does not reach the set call cycle, the requestAnimationFrame use of skipping some frames to express the animation, although there will be a lag effect but the overall speed is not slow, and setInterval thus the entire program slowed down, but each frame will be drawn out;

All in all, for environments that are more requestAnimationFrame time sensitive (but the animation logic is more complex), setInterval you can provide more concise logic (no self-processing time) while guaranteeing that the program's operations do not cause delays.

Start working

Complete the INIT function

varRequestanimationframe =Window.requestanimationframe||Window.mozrequestanimationframe||Window.webkitrequestanimationframe||Window.msrequestanimationframe;window.requestanimationframe=Requestanimationframe;varScene =NULL;varCamera =NULL;varRenderer =NULL;varID =NULL;varStat =NULL; function init () {stat=NewStats (); Stat.domElement.style.position='Absolute'; Stat.domElement.style.right='0px'; Stat.domElement.style.top='0px';    Document.body.appendChild (stat.domelement); Renderer=Newthree. Webglrenderer ({canvas:document.getElementById ('Maincanvas')    }); Scene=Newthree.    Scene (); ID=Requestanimationframe (draw);}    function Draw () {stat.begin ();    Renderer.render (scene, camera); ID=Requestanimationframe (Draw); Stat.end ();} function Stop () {if(ID!==NULL) {cancelanimationframe (ID); ID=NULL; }}

Then, in order to achieve the effect of bouncing, we create a sphere as a pinball model and create a plane as a bounce plane of the bouncing ball. In order to change the position of the pinball in the draw function, we can declare a global variable and the radius of the ballMesh sphere ballRadius .

var NULL ; var 0.5;

initadd spheres and planes to the function so that the pinball is on the plane and the plane uses a checkerboard image as the material:

// BallBallmesh =NewThree. Mesh (NewThree. Spheregeometry (Ballradius, -,8),     Newthree. Meshlambertmaterial ({color:0xffff00}); BALLMESH.POSITION.Y=Ballradius;scene.add (Ballmesh);//planevarTexture = three. Imageutils.loadtexture ('.. /img/chess.png', {}, function () {renderer.render (scene, camera);}); Texture.wraps= Texture.wrapt =three. Repeatwrapping;texture.repeat.Set(4,4);varPlane =NewThree. Mesh (NewThree. Planegeometry (5,5),        Newthree. Meshlambertmaterial ({map:texture}));p lane.rotation.x=-math.pi/2; Scene.add (plane);

Now, each frame is drawn with the same effect:

In order to record the state of the pinball, we need at least position, speed, acceleration three vectors, for the sake of simplicity, here the pinball only do the vertical direction of the free fall, so the position, speed, acceleration as long as each with a variable representation. Where the position is ballMesh.position.y , no additional variables are required, so we declare the speed v and acceleration globally a :

var 0 ; var a =-0.1;

Here, a = -0.1 each frame is represented by a small ball moving in a negative direction in the Y direction 0.1 .

At first, the pinball falls freely from its height maxHeight , bounces off the plane, and loses its speed. When the speed is very small, the ball will be on the plane to make a small amplitude jitter, so when the speed is enough, we need to let the pinball stop beating. Therefore, a global variable is defined to indicate whether it is in motion and the initial value is false :

var false;

Define a button in HTML, and when you click the button, the ball falls from the highest point:

function Drop () {    true;     = maxheight;     0 ;}

Here is the most critical function, in the draw function, you need to determine the current isMoving value, and update the speed and position of the ball:

function Draw () {stat.begin (); if(ismoving) {BALLMESH.POSITION.Y+=v; V+=A; if(BALLMESH.POSITION.Y <=Ballradius) {            //Hit planev =-V *0.9; }        if(Math.Abs (v) <0.001) {            //Stop MovingIsmoving =false; BALLMESH.POSITION.Y=Ballradius;    }} renderer.render (scene, camera); ID=Requestanimationframe (Draw); Stat.end ();}

In this way, the ball's bouncing effect is realized. The final code is:

varRequestanimationframe =Window.requestanimationframe||Window.mozrequestanimationframe||Window.webkitrequestanimationframe||Window.msrequestanimationframe;window.requestanimationframe=Requestanimationframe;varScene =NULL;varCamera =NULL;varRenderer =NULL;varID =NULL;varStat =NULL;varBallmesh =NULL;varBallradius =0.5;varIsmoving =false;varMaxHeight =5;varv =0;varA =-0.01; function init () {stat=NewStats (); Stat.domElement.style.position='Absolute'; Stat.domElement.style.right='0px'; Stat.domElement.style.top='0px';    Document.body.appendChild (stat.domelement); Renderer=Newthree. Webglrenderer ({canvas:document.getElementById ('Maincanvas')    }); Scene=Newthree.    Scene (); Camera=NewThree. Orthographiccamera (-5,5,3.75, -3.75,0.1, -); Camera.position.Set(5,Ten, -); Camera.lookat (NewThree. Vector3 (0,3,0));    Scene.add (camera); // BallBallmesh =NewThree. Mesh (NewThree. Spheregeometry (Ballradius, -,8),         Newthree. Meshlambertmaterial ({color:0xffff00    })); BALLMESH.POSITION.Y=Ballradius;    Scene.add (Ballmesh); //plane    varTexture = three. Imageutils.loadtexture ('.. /img/chess.png', {}, function () {renderer.render (scene, camera);    }); Texture.wraps= Texture.wrapt =three.    repeatwrapping; Texture.repeat.Set(4,4); varPlane =NewThree. Mesh (NewThree. Planegeometry (5,5),            Newthree.    Meshlambertmaterial ({map:texture})); Plane.rotation.x=-math.pi/2;    Scene.add (plane); varLight =NewThree. DirectionalLight (0xFFFFFF); Light.position.Set(Ten,Ten, the);    Scene.add (light); ID=Requestanimationframe (draw);}    function Draw () {stat.begin (); if(ismoving) {BALLMESH.POSITION.Y+=v; V+=A; if(BALLMESH.POSITION.Y <=Ballradius) {            //Hit planev =-V *0.9; }        if(Math.Abs (v) <0.001) {            //Stop MovingIsmoving =false; BALLMESH.POSITION.Y=Ballradius;    }} renderer.render (scene, camera); ID=Requestanimationframe (Draw); Stat.end ();} function Stop () {if(ID!==NULL) {cancelanimationframe (ID); ID=NULL; }}function drop () {ismoving=true; BALLMESH.POSITION.Y=MaxHeight; V=0;}

Link:HTTP://RUNJS.CN/CODE/QQPIKKWT

Link:Http://runjs.cn/detail/ecll36ex

To review physics and math.

"WebGl" Threejs implements a simple animation-bouncing balls