Threejs uses the track controller to view 3D objects

1. 360-degree viewing cube - track controller`OrbitControls`

Orbit controls allow the camera to orbit around a target.

Three.jsAfter rendering a cube object, if you want to see the cube in all directions. At this time, you can use the orbit controller to let the camera move around the cube, just like the earth moves around the sun, to observe the cube.

1.1 Create track controller

// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

2 parameters must be passed in:

Camera, let which camera move around the target. The default target is the origin. The cube is at the origin.
The rendered canvas dom object is used to monitor the mouse event to control the camera's surrounding movement.

1.2 Each frame updates the screen according to the controller

Because after the controller monitors the mouse event, it needs to control the camera to move around the target according to the dragging of the mouse, and display the picture according to the effect after the movement . In order to ensure the smooth rendering of the screen, choose to use the request animation frame requestAnimationFrame, and trigger the callback function to execute the rendering of the screen when the next frame is rendered on the screen.

function render() {//如果后期需要控制器带有阻尼效果、自动旋转等效果，就需要加入controls.update()//controls.update()renderer.render(scene, camera);// 渲染下一帧的时调用render函数requestAnimationFrame(render);
}

render();

1.2.1 requestAnimationFrame

It is a new feature of HTML5, which is different from setTimeout and setInterval.
requestAnimationFrame is more accurate than the latter two. It uses the system time interval to maintain the best drawing efficiency. It will not cause overdrawing and increase overhead because the interval is too short; it will not cause the animation to freeze and not be smooth because the interval is too long Various web animation effects can have a unified refresh mechanism, thereby saving system resources, improving system performance, and improving visual effects.

requestAnimationFrameIt is an API specially provided by the browser for animation. The browser will automatically optimize the method call at runtime, and if the page is not active, the animation will automatically pause, effectively saving CPU overhead.

Therefore, the screen refreshes the screen every frame, and it is necessary to execute

function render() {renderer.render(scene, camera);// 渲染下一帧的时候就会调用render函数requestAnimationFrame(render);
}
render();

1.3 Track controller - effect comparison before and after adding

import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

// 目标：使用控制器查看3d物体

// 1、创建场景
const scene = new THREE.Scene()

// 2、创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
)

// 设置相机位置
camera.position.set(0, 0, 10)
scene.add(camera)

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 2)
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 })
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
// 将几何体添加到场景中
scene.add(cube)

// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(3)
scene.add(axesHelper)

function render() {//如果需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入controls.update()// controls.update()renderer.render(scene, camera)// 渲染下一帧的时候就会调用render函数requestAnimationFrame(render)
}

render()

1.4 Damping effect of the track controller - giving the controller a sense of weight

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
function render() {// 阻尼效果必须更新控制器controls.update()renderer.render(scene, camera)requestAnimationFrame(render)
}

render()

2. Three controls the movement of the object - `position`the properties of the object

In order to make the object move, you can set positionthe properties of the object.

Both the camera and the cube are objects. Each object is 1 object.

In the official documentation, you can see that both cameras cameraand objects meshinherit Object3Dclasses. Therefore camera, meshall belong to 3dthe object.
From 3dthe official documentation of the object, you can find the position attribute, and this attribute is a vector3 object.

Therefore, through vector3the documentation of the official class, we can simply use the following method to modify positionthe location

//设置该向量的x、y 和 z 分量。
mesh.position.set(x,y,z);
//直接设置position的x,y,z属性
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;

Official documentation: threejs.org/docs/index.…

2.1 Modify a little position every frame to form an animation

For example, move the cube to the right by 0.02 every frame, and start at 0 when the position is greater than 3.

function render() {cube.position.x += 0.02;if (cube.position.x > 3) {cube.position.x = 0;}renderer.render(scene, camera);// 渲染下一帧的时候就会调用render函数requestAnimationFrame(render);
}

render();

import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

// 目标：控制3d物体移动

// 1、创建场景
const scene = new THREE.Scene()

// 2、创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
)

// 设置相机位置
camera.position.set(0, 0, 10)
scene.add(camera)

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 })
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
// 将几何体添加到场景中
scene.add(cube)

// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(3)
scene.add(axesHelper)

function render() {cube.position.x += 0.02if (cube.position.x > 3) {cube.position.x = 0}renderer.render(scene, camera)// 渲染下一帧的时候就会调用render函数requestAnimationFrame(render)
}

render()

3. Threejs adds coordinate axis helper——`AxesHelper`

Generally, in the development stage, when adding objects and setting object positions, you need to refer to the coordinate axes to check whether they are placed in the corresponding positions. So generally add the coordinate axis helper as a reference.

The helper simply simulates an object with 3 axes. Red represents the X axis. Green represents the Y axis. Blue represents the Z axis .

const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

3.1 ArrowHelper Arrow helper

A 3D arrow object for simulating directions

const dir = new THREE.Vector3( 1, 2, 0 );

//normalize the direction vector (convert to vector of length 1)
dir.normalize();

const origin = new THREE.Vector3( 0, 0, 0 );
const length = 1;
const hex = 0xffff00;

const arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
scene.add( arrowHelper )

3.1.1 ArrowHelper constructor

4. Threejs object scaling and rotation

4.1 `scale`Setting Zoom

The properties of the object scaleare vector3objects, so vector3set the zoom size in the x/y/z axis direction according to the properties and methods of the object.

//例如设置x轴放大3倍、y轴方向放大2倍、z轴方向不变
cube.scale.set(3, 2, 1)
//单独设置某个轴的缩放
// cube.scale.x = 3

4.2 rotation setting rotation

Rotate by setting the rotation property, which is an instance of the Euler class, so the rotation angle can be set through the methods of the Euler class.

//直接设置旋转属性，例如围绕x轴旋转90度
//cube.rotation.x = -Math.PI / 2
//围绕x轴旋转45度
cube.rotation.set(-Math.PI / 4, 0, 0, 'XZY')

4.2.1 Euler class Euler

4.2.2 Euler's set method

4.2.3 Rotation animation

Each frame rotates at an angle of 0.1 in radians to realize the animation code

function render() {//移动cube.position.x += 0.02;//旋转cube.rotation.x += 0.1;if (cube.position.x > 3) {cube.position.x = 0;}renderer.render(scene, camera);// 渲染下一帧的时候就会调用render函数requestAnimationFrame(render);
}

4.3 Rotation example

import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

// 目标：控制3d物体旋转

// 1、创建场景
const scene = new THREE.Scene()

// 2、创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
)

// 设置相机位置
camera.position.set(0, 0, 10)
scene.add(camera)

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 })
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
// 将几何体添加到场景中
scene.add(cube)

// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(3)
scene.add(axesHelper)

function render() {//移动cube.position.x += 0.02//旋转cube.rotation.x += 0.1if (cube.position.x > 3) {cube.position.x = 0}renderer.render(scene, camera)// 渲染下一帧的时候就会调用render函数requestAnimationFrame(render)
}

render()

at last

A front-end information package is prepared for everyone. Contains 54, 2.57G front-end related e-books, "Front-end Interview Collection (with answers and analysis)", difficult and key knowledge video tutorials (full set).

Friends in need, you can click the card below to receive and share for free