Three. JS learning - basic operation of camera (learn from)

Catalog

1 Determine the projection method

2 Determine camera parameters position,lookAt,up

2.1  Location position

2.2 lookAt & up

3 Track controller - Realize scene and mouse interaction

3.1 New controller

3.1.1 The surrounding goal of the controller target

3.2 Cycle through the scene  

3.3 Some methods provided by the controller

3.3.1 The scene rotates automatically .autoRoate

3.3.2 Damping inertia .enableDamping

3.3.3 Some key operations

---

This article is based on games202 Homework 0 Frame structure , Yes three.js In the program structure —— Learn the basic operation of camera , During the process, the operation structure will be exemplified .

1 Determine the projection method

Reference resources ：PerspectiveCamera – three.js docs (webgl3d.cn)

For different projection methods , Cameras are divided into ：

• Perspective projection camera THREE.PerspectiveCamera
• Orthographic projection camera THREE.OrthographicCamera

Perspective camera is relatively more used in the two cameras , With homework 0 Take the code in as an example ：

const camera = new THREE.PerspectiveCamera(75, gl.canvas.clientWidth / gl.canvas.clientHeight, 0.1, 1000);

// Perspective camera 
.PerspectiveCamera(fov:Float, aspect:Float, near:Float, far:Float);

 () The parameters in represent ： Angle of view fov, Camera aspect ratio aspect, The nearest distance near, The farthest visible distance far. Is that familiar ？101 It involves ！OpenGL These four parameters are used in "eye_fovy, aspect_ratio, zNear, zFar" To define a view frustum, Visual cone , The human eye can only see what is inside the visual cone .

among ,aspect ratio Is the aspect ratio of the viewport ： width/height;zNear and zFar Define the camera position and position near Flat and far Between planes distance （zNear、zFar > 0）, That is to say, bi zNear Near or than zFar Nothing far away can see .

2 Determine camera parameters position,lookAt,up

stay Three.js in ,camera Yes position,lookAt and up These three attributes .

（1）position—— The camera position defaults to (0,0,0);

（2）lookAt—— Camera focus direction , The default is Z Axis negative half axis ;

（3）up—— The default is (0,1,0).

2.1  Location position

//position attribute ：
// Move camera position , The following is to move the position to (0,0,30)
camera.position.set(0,0,30);

Work in progress 0 A global variable is directly specified at the beginning of camera position, There is position set Directly call .

// Defines a global variable 
var cameraPosition = [-20, 180, 250];

// Homework 0 in ,position Directly call the initial global variable 
camera.position.set(cameraPosition[0], cameraPosition[1], cameraPosition[2]);

2.2 lookAt & up

If you want to change, you can use the following code ：

//up attribute :
// Available when changing , The following code specifies x Axis up 
camera.up.x=1;
camera.up.y=0;
camera.up.z=0;

//lookAt:
// set focus , The following settings are oriented (0,10,0) Direction 
camera.lookAt(new THREE.Vector3(0,10,0));

If a controller is added to the scene OrbitControls, Want to change the focus setting of the camera camera.lookAt() It's invalid , Need to change the controller target attribute , So work 0 What is changed in is the controller target：

	// Because the controller is set , Therefore, the controller can only be changed target To change the camera lookAt Direction 
	cameraControls.target.set(0, 1, 0);

3 Track controller - Realize scene and mouse interaction

Track controller OrbitControls.js It's a three.js Extended controls for , It can realize the interaction between scene and mouse . Use the left and right buttons of the mouse and the scroll wheel to move the scene .

3.1 New controller

Homework 0 This line of code in is to create a new track controller ;

	const cameraControls = new THREE.OrbitControls(camera, canvas);

3.1.1 The surrounding goal of the controller target

The track controller allows the camera to run around a target track , The target defaults to THREE.Vector3(), namely (0,0,0), It can be done by .target = new THREE.Vector3(...) To modify the ：

//1.
cameraControls.target = new THREE.Vector3(0, 1, 0);
//2.
cameraControls.target.set(0, 1, 0);

meanwhile , If you need to set the projection animation, you also need to target Make some adjustments , I won't go into details here , If you are interested, you can have a look at ： 

Three.js - OrbitControls Orbit control around the target target Parameters  

3.2 Cycle through the scene  

To make this controller work , You must cycle through the scene ：requestAnimationFrame, Homework 0 There is the code part of loop rendering scene in ：

	// Cycle through the scene 
	function mainLoop(now) {
		cameraControls.update();// Update controller 

		renderer.render(guiParams);// Perform the render operation 
		requestAnimationFrame(mainLoop);
	}
	requestAnimationFrame(mainLoop);

3.3 Some methods provided by the controller

OrbitControls.js The controller provides API It is convenient to show the model , for example ：

3.3.1 The scene rotates automatically .autoRoate

// The scene rotates automatically 
.autoRoate = boolean;
.autoRotateSpeed = float;

For example, give homework 0 add ：

	// Auto rotate 
	cameraControls.autoRotate =true;
	cameraControls.autoRotateSpeed  = 10;

3.3.2 Damping inertia .enableDamping

Add a sense of weight , For example, it will continue to slide for a certain distance when rotating after use .

// damping 
.enableDamping = boolean;
.dampingFactor = float;

For example, give homework 0 add ：

	// damping 
	cameraControls.enableDamping = true;
	cameraControls.dampingFactor = 0.1;

3.3.3 Some key operations

There are many key operations , Take your homework here 0 give an example , Other operations can be searched as needed ：

	// Key setting 
	cameraControls.enableZoom = true;// Camera zoom 
	cameraControls.enableRotate = true;// The camera rotates 
	cameraControls.enablePan = true;// Camera translation 
	// Speed setting 
	cameraControls.rotateSpeed = 0.3;
	cameraControls.zoomSpeed = 1.0;
	cameraControls.panSpeed = 2.0;