Three.js miscellaneous notes (three)-object movement

Object movement

In three.js, there are two ways to make a stationary object show a motion effect:

Let the object geometry move
Let the camera move

Test code: Let the cylinder move, and the camera actually moves.
Cylinders can use EdgesGeometry to draw border lines

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>运动</title>
		<script src="js/three.js"></script>
	</head>
	<body>
			<div id="app"></div>
			<script>
				// 创建场景
				var scene = new THREE.Scene();
				// 创建相机   参数：视角、视角比例（宽度和高度比）、最近像素、最远像素
				camera = new THREE.PerspectiveCamera(105,
					window.innerWidth / window.innerHeight, 1, 1000);	
				// 渲染器
				render = new THREE.WebGLRenderer({
					antialias: true
				});
				// 计算处理dpi
				render.setPixelRatio(window.devicePixelRatio);
				// 设置画布大小
				render.setSize(window.innerWidth, window.innerHeight)
				
				var app = document.getElementById("app");
				// 绘制出一个canvas小面板
				app.appendChild(render.domElement);
				
				// 创造一个立方体, 点模型
				var geometry = new THREE.CylinderGeometry(10, 10, 20, 15); //创建一个立方体几何对象Geometry
				// 创造一个立方体, 网格模型
				var material3 = new THREE.MeshBasicMaterial({
					color: 0xffff00,
				}); 
				var meshs = new THREE.Mesh(geometry, material3);
				// 创建物体的边框线
				var geoEdges = new THREE.EdgesGeometry(geometry, 1);
				var edgesMtl =  new THREE.LineBasicMaterial({color: 0xff0000});
				var geoLine = new THREE.LineSegments(geoEdges, edgesMtl);
				
				meshs.add(geoLine);
				scene.add(meshs);
				//执行渲染操作   指定场景、相机作为参数
				camera.position.z = 40;
				camera.position.y = 20;
				camera.position.x = 0;
				render.render(scene, camera);
				
				// 产生动效
				function animate(){
					// 1.照相机移动
					camera.position.y -= 0.05;
					if(camera.position.y < -10) {
						camera.position.z += 0.05;
					}
					
					render.render(scene, camera);
				}
				setInterval(animate,10);
		</script>
	</body>
</html>

Effect:
Cylinder simulates the flying effect of Kongming lantern
If the object is to move, just slightly modify the motion function

// 产生动效
function animate(){
    
    
	// if(camera.position.y >= -1000){
    
    
	// 	// 1.照相机移动
	// 	camera.position.y -= 0.3;
	// 	if(camera.position.y < -10) {
    
    
	// 		camera.position.z += 0.3;
	// 	}
	// }
	//2.物体移动
	meshs.position.y += 0.3;
	if(meshs.position.y > 10) {
    
     
		meshs.position.z -= 0.3;
	}
	render.render(scene, camera);
	window.requestAnimationFrame(animate);
}

performance

In real life, you can often see the animation effects drawn out, and some animation effects look very smooth, and some are very lagging. These are closely related to the performance of the program after exercise.

Regarding performance: test a program to see if there is a bottleneck in performance. In the 3D world, the concept of frame number is often used. First of all, let's define the meaning of frame number.

Number of frames: The graphics processor can refresh several times per second, usually expressed by fps (Frames Per Second)

Object movement in the human eye:
When the object is moving fast, when the image seen by the human eye disappears, the human eye can continue to retain the image of the image for about 1/24 second. This phenomenon is called persistence of vision. . It is a property of the human eye. When the human eye views an object, it is imaged on the retina, and input into the human brain by the optic nerve to feel the image of the object. Frame after frame of images enter the human brain, and the human brain will connect these images to form an animation.

In three.js, in order to let us see these data better, we can use the performance monitor Stats to detect and manage the movement.

Performance Monitor Stats

About Stats official introduction: https://github.com/mrdoob/stats.js
can also be found in the folder after downloading Three.js, downloading from GitHub may be a bit slow, I downloaded it from gitee. Give a few links:
three.js download address 01
three.js download address 02
GitHub address
Insert picture description here
Remember to import the stats file when using it. Generally speaking, the effect of using it is as follows:
1. SetMode function

When the parameter is 0, it means that the FPS interface is displayed, and when the parameter is 1, it means that the MS interface is displayed.

2、stats的domElement

The domElement of stats represents the drawing destination (DOM), and the waveform graph is drawn on it.

3. The begin function of stats

begin, call the begin function before the code you want to test, and call the end() function after your code is executed, so that you can count the average number of frames executed by this code.
Insert picture description here
How to use: just insert it in the code

new a stats object, code: stats = new Stats();
Add this object to the html page
Call the stats.update() function to count the time and number of frames

// 性能监视器
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// 将stats的界面对应左上角
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '30px';
stats.domElement.style.top = '0px';
app.appendChild( stats.domElement );

// 在运动函数中写入stats.update();
function animate(){
    
    
	if(camera.position.y >= -1000){
    
    
		// 1.照相机移动
		camera.position.y -= 0.3;
		if(camera.position.y < -10) {
    
    
			camera.position.z += 0.3;
		}
	}
	render.render(scene, camera);
	window.requestAnimationFrame(animate);
	stats.update();
}

Insert picture description here