首页 | Ben 前端工程师

[WebGL]前端可视化 - Threejs学习

技术笔记2023-08-18119

前言

WebGL 很强大，但 API 偏底层。Three.js 作为基于 WebGL 的高层封装，让我们能够用更少的代码做更多的 3D 事：模型展示、交互可视化、Web 游戏、VR/AR 等。本文通过清晰的概念、代码范例与实践建议，帮你从入门到进阶，快速建立可落地的 3D 开发能力。

使用方式

直接引入（CDN）

html 复制代码

<script src="https://threejs.org/build/three.js"></script>

在 Vue/React 等工程化项目中

bash 复制代码

npm install three --save

js 复制代码

import * as THREE from 'three';

一、基础概念

了解 threejs 的场景 Scene、相机 Camera、渲染器 Renderer 概念

1.1 三维场景（Scene）

相当于一个 3D 虚拟世界容器，所有的人、物、灯光都在这个场景容器里。

js 复制代码

import { Scene } from 'three';
const scene = new Scene();
scene.add(/* 物体、灯光、环境等 */);

1.2 物体形状：几何体（Geometry）

graph LR 几何体[几何体Geometry] 几何体[几何体Geometry]-->长方形[长方形BoxGeometry] 几何体[几何体Geometry]-->圆柱体[圆柱体CylinderGeometry] 几何体[几何体Geometry]-->球体[球体SphereGeometry] 几何体[几何体Geometry]-->圆锥[圆锥ConeGeometry] 几何体[几何体Geometry]-->矩形平面[矩形平面PlaneGeometry] 几何体[几何体Geometry]-->圆平面[圆平面CircleGeometry]

js 复制代码

// 创建一个长方体几何对象
const geometry = new THREE.BoxGeometry(1, 1, 1);

更多几何体：TorusGeometry、TorusKnotGeometry、IcosahedronGeometry、LatheGeometry、ExtrudeGeometry（可用于路径拉伸建模）等。

1.3 物体外观：材质（Material）

graph LR 材质[材质Material] 材质[材质Material]-->网格基础材质[网格基础材质MeshBasicMaterial] 材质[材质Material]-->网格漫反射材质[网格漫反射材质MeshLambertMaterial] 材质[材质Material]-->网格高光材质[网格高光材质MeshPhongMaterial] 材质[材质Material]-->物理材质[物理材质] 材质[材质Material]-->点材质[点材质PointsMaterial] 材质[材质Material]-->线基础材质[线基础材质LineBasicMaterial] 材质[材质Material]-->精灵材质[精灵材质SpriteMaterial]

js 复制代码

const material = new THREE.MeshStandardMaterial({
	color: 0xff5555,
	metalness: 0.2,
	roughness: 0.6,
});

建议以 PBR 材质（MeshStandardMaterial/MeshPhysicalMaterial）为默认选择，写实效果与灯光/环境贴图兼容性更好。

1.4 网格模型（Mesh）

几何体 + 材质 = 可渲染的网格。

js 复制代码

const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0.5, 0);
scene.add(mesh);

1.5 相机（Camera）

PerspectiveCamera（透视相机）：远小近大，接近人眼视觉。
OrthographicCamera（正交相机）：无透视缩放，适合工程图/2D UI 叠加。

js 复制代码

const camera = new THREE.PerspectiveCamera(
	60,
	window.innerWidth / window.innerHeight,
	0.1,
	1000
);
camera.position.set(3, 2, 6);
camera.lookAt(0, 0, 0);

1.6 渲染器（Renderer）

js 复制代码

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);

1.7 灯光（Lights）与阴影

js 复制代码

const ambient = new THREE.AmbientLight(0xffffff, 0.4);
const dir = new THREE.DirectionalLight(0xffffff, 1);
dir.position.set(5, 8, 5);
dir.castShadow = true;
scene.add(ambient, dir);

renderer.shadowMap.enabled = true;
mesh.castShadow = true;
// 接收阴影的地面
const ground = new THREE.Mesh(
	new THREE.PlaneGeometry(20, 20),
	new THREE.MeshStandardMaterial({ color: 0xdddddd })
);
ground.receiveShadow = true;
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

1.8 控制器（OrbitControls）

js 复制代码

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

二、进阶能力

2.1 纹理与环境贴图（IBL）

js 复制代码

const texture = new THREE.TextureLoader().load('/textures/wood.jpg');
const mat = new THREE.MeshStandardMaterial({ map: texture });

// 环境贴图（更真实的高光/反射）
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
new RGBELoader().load('/hdr/venice_sunset_1k.hdr', (envMap) => {
	envMap.mapping = THREE.EquirectangularReflectionMapping;
	scene.environment = envMap;
	scene.background = envMap; // 可选：把 hdr 作为背景
});

2.2 模型加载

js 复制代码

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load('/models/robot.glb', (gltf) => {
	scene.add(gltf.scene);
});

小贴士：用 Draco/Meshopt 压缩 glTF，显著减小体积、提速加载。

2.3 动画系统

手写动画：requestAnimationFrame 循环修改 position/rotation/material 等。
骨骼动画：使用 AnimationMixer 播放 glTF 内建动画。

js 复制代码

const clock = new THREE.Clock();
function animate() {
	requestAnimationFrame(animate);
	controls.update();
	renderer.render(scene, camera);
}
animate();

2.4 后处理（Post-processing）

Bloom、FXAA、景深、色调映射等。

js 复制代码

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
// ... 添加其它特效 Pass
function animate() {
	requestAnimationFrame(animate);
	controls.update();
	composer.render();
}

2.5 粒子与实例化（性能关键）

Points + PointsMaterial 绘制大量粒子。
InstancedMesh 批量渲染成千上万相同几何体，极大减少 draw call。

三、快速上手 Demo（旋转方块）

可直接运行，体现「场景-相机-网格-渲染循环」最小闭环。

html 复制代码

<canvas id="c"></canvas>
<script type="module">
	import * as THREE from 'https://unpkg.com/three@0.165.0/build/three.module.js';

	const renderer = new THREE.WebGLRenderer({
		canvas: document.getElementById('c'),
		antialias: true,
	});
	renderer.setSize(innerWidth, innerHeight);
	renderer.setPixelRatio(Math.min(devicePixelRatio, 2));

	const scene = new THREE.Scene();
	const camera = new THREE.PerspectiveCamera(
		60,
		innerWidth / innerHeight,
		0.1,
		100
	);
	camera.position.set(3, 2, 6);
	camera.lookAt(0, 0, 0);

	const cube = new THREE.Mesh(
		new THREE.BoxGeometry(1, 1, 1),
		new THREE.MeshStandardMaterial({ color: 0x4e8cff, roughness: 0.5 })
	);
	scene.add(cube);

	const ambient = new THREE.AmbientLight(0xffffff, 0.5);
	const dir = new THREE.DirectionalLight(0xffffff, 1);
	dir.position.set(5, 8, 5);
	scene.add(ambient, dir);

	addEventListener('resize', () => {
		camera.aspect = innerWidth / innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(innerWidth, innerHeight);
	});

	const clock = new THREE.Clock();
	(function loop() {
		requestAnimationFrame(loop);
		const t = clock.getElapsedTime();
		cube.rotation.x = t * 0.6;
		cube.rotation.y = t * 1.0;
		renderer.render(scene, camera);
	})();
</script>

四、性能优化与最佳实践（Three.js 版）

减小资源体积
- 使用 glTF（glb）+ Draco/Meshopt 压缩；贴图用 WebP/AVIF；合理分辨率与重复纹理（repeat）。
控制 draw call
- 合并网格（BufferGeometryUtils.mergeVertices/mergeGeometries）、使用 InstancedMesh、共享材质与纹理。
合理的像素比与抗锯齿
- renderer.setPixelRatio(Math.min(devicePixelRatio, 2))，在高 DPI 设备防止过度渲染。
只在需要时开阴影
- 限制 castShadow/receiveShadow 的对象数量；降低阴影贴图大小；使用方向光阴影时优化正交相机包围盒。
视锥裁剪与 LOD
- Three.js 默认做视锥裁剪；远处对象使用简化几何或禁用渲染；使用 THREE.LOD。
后处理节制
- 合理叠加 Pass；把 Bloom/SSAO 等开销大的效果放在必要场景；尽量避免在移动端叠太多效果。
动画优化
- 使用 AnimationMixer 控制播放/暂停；减少每帧大量对象属性写入；必要时改为 Shader 动画或 GPU Instancing。
加载与并发
- 预加载首屏关键资源，懒加载次要模型与贴图；并发数量可控，避免在低端机过载。

五、常见坑位与排错清单

黑屏/看不到物体：相机没对准、物体太小/太远、近远裁剪面设置不当（near/far）。
一片纯黑：使用了受光材质（Lambert/Standard/Physical）但没有灯光。
阴影不对/缺失：未开启 renderer.shadowMap.enabled；光、物体、地面未正确设置 castShadow/receiveShadow。
闪烁/走样严重：未限制像素比、抗锯齿设置、Z-fighting（相机 near 设置过小、两个面重合）。
模型方向/大小奇怪：坐标系差异（Z 轴朝前、Y 轴朝上），导出单位与 Three.js 单位不一致。
性能抖动：大量独立网格、巨幅贴图、后处理过多、每帧创建对象（应复用）。

六、生态与资源指引

官方文档：threejs.org / examples / docs
示例与源码学习：three/examples/*
模型格式：优先 glTF/GLB；配合 Draco/Meshopt
物理引擎：Ammo.js、Cannon-es
编辑器：Three.js Editor、Blender（建模/烘焙）
HDRI：polyhaven.com（高质量免费环境贴图）

暂无评论，欢迎给我评论！

[WebGL]前端可视化 - Threejs学习

前言

相关概念

使用方式

直接引入（CDN）

在 Vue/React 等工程化项目中

一、基础概念

1.1 三维场景（Scene）

1.2 物体形状：几何体（Geometry）

1.3 物体外观：材质（Material）

1.4 网格模型（Mesh）

1.5 相机（Camera）

1.6 渲染器（Renderer）

1.7 灯光（Lights）与阴影

1.8 控制器（OrbitControls）

二、进阶能力

2.1 纹理与环境贴图（IBL）

2.2 模型加载

2.3 动画系统

2.4 后处理（Post-processing）

2.5 粒子与实例化（性能关键）

三、快速上手 Demo（旋转方块）

四、性能优化与最佳实践（Three.js 版）

五、常见坑位与排错清单

六、生态与资源指引

[WebGL]前端可视化 - Threejs学习

前言

相关概念

使用方式

直接引入（CDN）

在 Vue/React 等工程化项目中

一、基础概念

1.1 三维场景（Scene）

1.2 物体形状：几何体（Geometry）

1.3 物体外观：材质（Material）

1.4 网格模型（Mesh）

1.5 相机（Camera）

1.6 渲染器（Renderer）

1.7 灯光（Lights）与阴影

1.8 控制器（OrbitControls）

二、进阶能力

2.1 纹理与环境贴图（IBL）

2.2 模型加载

2.3 动画系统

2.4 后处理（Post-processing）

2.5 粒子与实例化（性能关键）

三、快速上手 Demo（旋转方块）

四、性能优化与最佳实践（Three.js 版）

五、常见坑位与排错清单

六、生态与资源指引