Three.js

创建 3D 场景、模型、动画和交互

# 核心概念

概念	作用
Scene	3D 世界
Camera	观察角度
Renderer	负责绘制
Geometry	物体形状
Material	物体外观
Mesh	几何体+材质
Light	光源
Animation	动画

# 安装 Three.js

npm install three

src
 ├── main.js
 └── three/
      └── scene.js

import * as THREE from 'three';

1
2
3
4
5
6
7
8

# 创建第一个 3D 场景

import * as THREE from 'three';

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

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

// 创建立方体
const geometry = new THREE.BoxGeometry(1,1,1);

// 创建材质（透明度）
const material = new THREE.MeshBasicMaterial({ color:0x00ff00 });

// 创建网格（可以修改位置）
const cube = new THREE.Mesh(geometry,material);

// 添加到场景
scene.add(cube);
    


// 相机位置
camera.position.z = 5;

// 渲染 输出canvas画布
renderer.render(scene,camera);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 三维空间AxesHelper

颜色RGB 对应坐标 XYZ

// 创建三维坐标轴（写在渲染器前面）
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

1
2
3

# 光源对象

点光源 PointLightHelper

const pointLight = new THREE.PointLight( 0xff0000, 1, 100 );
pointLight.position.set( 10, 10, 10 );
scene.add( pointLight );

// 构造一个新的点光源辅助对象。
const sphereSize = 1;
const pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
scene.add( pointLightHelper );

1
2
3
4
5
6
7
8

平行光

// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
// 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
directionalLight.position.set(80, 100, 50);
// 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0
directionalLight.target = mesh;
scene.add(directionalLight);


// 可视化平行光
// 辅助对象，用于可视化 DirectionalLight（平行光）对场景的影响。它由一个平面和一条线组成，分别代表光源的位置和方向。
const helper = new THREE.DirectionalLightHelper( light, 5 );
scene.add( helper );

1
2
3
4
5
6
7
8
9
10
11
12
13

环境光

const light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

1
2
3

# 相机空间轨道控制器OrbitControls

旋转缩放

/*
 * 创建渲染器对象
 */
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); // 设置three.js渲染区域的尺寸(像素px)
renderer.render(scene, camera); //执行渲染操作
//three.js执行渲染命令会输出一个canvas画布，也就是一个HTML元素，你可以插入到web页面中
document.body.appendChild(renderer.domElement);

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls( , renderer.domElement);
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {
    renderer.render(scene, camera); //执行渲染操作
    // 浏览器控制台查看相机位置变化
    console.log('camera.position',camera.position);
});//监听鼠标、键盘事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 动画

// 周期性执行，默认理想状态下每秒钟执行60次
// 渲染循环 
function render(){
    mesh.rotateY(0.01);//周期性旋转，每次旋转0.01弧度
    renderer.render(scene,camera);//周期性执行相机的渲染功能，更新canvas画布上的内容
    requestAnimationFrame(render);
}
render();

// 计算时间
// 渲染循环
const clock = new THREE.Clock();
function render() {
    const spt = clock.getDelta()*1000;//毫秒
    console.log('两帧渲染时间间隔(毫秒)', spt);
    console.log('帧率FPS', 1000/spt);
    renderer.render(scene, camera); //执行渲染操作
    mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
    requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}
render();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

渲染循环和相机控件 OrbitControls，设置了渲染循环，相机控件 OrbitControls 就不用再通过事件change执行

renderer.render(scene, camera);，毕竟渲染循环一直在执行renderer.render(scene, camera);。

上次更新: 2026/08/11, 10:20:19

← 第三方库