[three.js study notes] 03 Movement of objects

In the previous chapter, we have completed the creation of the scene, the object and added light and shadow. In this chapter, we try to make the object move. It
is well known that animation is composed of static images frame by frame, so the 3d rendering in the browser is also Similarly, the position, size, etc. of objects change in each frame, and they are linked together to become an animation.
Modern browsers provide an efficient solution for re-rendering the scene, which is the requestAnimationFrame() method. With this method, all drawing operations can be defined, and the browser will draw efficiently and smoothly.
Add a new function to the original code (just put it in the init function):

function animate(){
    requestAnimationFrame(animate);
    renderer.render(scene,camera);
}
//注释调之前的renderer.render();并且用animate()来进行渲染更新

animate();

This is equivalent to a recursive function. Each time the redraw is completed, the redraw function will be called again, and the renderer will also update the changes in the objects in the scene.
Of course, so far, there is still no action -. -

Auxiliary library frame number statistics

The frame number statistics library developed by the author of three.js can detect the number of frames when the animation is running, which is used to test whether the animation is silky smooth. If the number of frames is too low, you may need to update your graphics card or change your code
. Frame number statistics
Remote call https://threejs.org/examples/js/libs/stats.min.js
Add in html:

<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>

Create a frame count object:

    //帧数统计
    var stats = new Stats();
    document.body.appendChild(stats.dom);//简单的直接添加的方法
    ……
    function animate(){
        requestAnimationFrame(animate);
        renderer.render(scene,camera);
        stats.update();//更新animate函数 ，添加统计更新
    }

Run it again, in addition to what you saw before, you can see that there is more statistical information in the upper left corner:

by default, you will see fps information. The higher the better, the time used to draw each frame will appear when you click it. (green), click again to see the memory occupied by the browser (purple).

Add animation

But so far there is no animation. , . Start adding now

self-rotation

function rotate(obj,xspeed,yspeed,zspeed){//物体，x方向速度，y方向速度，z方向速度
    obj.rotation.x += xspeed;
    obj.rotation.y += yspeed;
    obj.rotation.z += zspeed;
}

Then add the function to rotate the cube in the animate function

    ……
    function animate(){
        requestAnimationFrame(animate);
        rotate(cube,0.02,0.01,0.01);
        renderer.render(scene,camera);
        stats.update();
    }
    ……

Run it, this time the cube rotates in a strange way. . Since it's dynamic, I'll put a link to the finished version later. , .

orbit

In addition to its own rotation, there is also an animation of rotating around the axis, which is an animation representation of changing the position, which changes the position of the object

var speed = 0;//在全域内作用的一个数字，代表的其实是在一个三角函数线上的x值 
function goesRound(obj,speed){
    step += speed;
    obj.position.x = 20 + ( 10 * (Math.cos(step)));
    obj.position.z = 0 +( 10 * (Math.))
}
……
function animate(){
    requestAnimationFrame(animate);
    rotate(cube,0.02,0.01,0.01);
    goesRound(sphere,0.02);//让球体绕轴旋转
    renderer.render(scene,camera);
    stats.update();
}

Running it again, we can see that the sphere is indeed spinning on its axis, just like the earth revolves around the sun-. - (This statement is correct)

Piston-like motion

Emm, I'm thinking a bit crooked, but this animation is a bit like the way the piston moves.
Method :

var step2 = 0;
function upAndDown(obj,speed){
    step2 += speed;
    obj.position.y = 10 + ( 5 * (Math.cos(step2)));
}
……
function animate(){
    requestAnimationFrame(animate);
    rotate(cube,0.02,0.01,0.01);
    goesRound(sphere,0.02);
    upAndDown(cylinder,0.04);//将柱体添加进这个运动
    renderer.render(scene,camera);
    stats.update();
}

Running it again, we found that the pentagonal prism began to move up and down emm↑↓ probably like this haha

spherical viewing assembly

I want to see my scene from a different angle? At this time, this component should be added.
It can make the camera rotate according to the orbit of the sphere, or translate the
remote: https://threejs.org/examples/js/controls/TrackballControls.js
usage After calling in html, in the init function Add to:

var controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.minDistance = 20.0;//最近距离
controls.maxDistance = 400.0;//最远距离
controls.dymnamicDampingFactor = 0.1;//这个我暂时找不到是干嘛用的-，-

And add it to the animate function to update

function animate(){
    requestAnimationFrame(animate);
    rotate(cube,0.02,0.01,0.01);
    goesRound(sphere,0.02);
    upAndDown(cylinder,0.04);
    renderer.render(scene,camera);
    controls.update();//更新摄像机球形轨道控制器
    stats.update();
}

Press the left button of the pc
mouse and drag to rotate,
right click and drag to pan, and the
scroll wheel changes the distance between the camera and the scene (zoom in and out)

Mobile phone
Slide to rotate
Two fingers slide to pan at the same time
Two fingers pull in and zoom out

In this way, you can see the completed things
from different

angles