Three.js 是一个基于 JavaScript 的 3D 库，用于在网页浏览器中创建和展示交互式 3D 图形。它通过 WebGL（Web Graphics Library）API 提供硬件加速的 3D 渲染能力，无需安装额外插件，让开发者可以使用 HTML、CSS 和 JavaScript 构建沉浸式 3D 体验。以下是其核心特点和功能的简要介绍：
-
跨平台兼容性
- 支持所有现代浏览器（Chrome、Firefox、Safari、Edge）。
- 可在桌面和移动设备上流畅运行。
-
简化 WebGL 开发
- 抽象底层 WebGL 复杂性，提供直观的 API。
- 无需深入了解着色器（Shader）即可创建 3D 场景。
-
丰富的内置功能
- 几何体：内置多种基本几何体（立方体、球体、圆柱体等），支持自定义几何体。
- 材质：提供多种材质（MeshBasicMaterial、MeshPhongMaterial、ShaderMaterial 等）。
- 光照：支持点光源、方向光、聚光灯、环境光等。
- 相机：透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。
- 动画：内置动画系统，支持关键帧动画、骨骼动画。
-
性能优化
- 支持实例化（InstancedMesh），高效渲染大量相同模型。
- 提供 LOD（Level of Detail）技术，根据距离动态调整模型精度。
-
场景（Scene）
容器，包含所有 3D 对象、相机和光源。
-
相机（Camera）
决定场景中哪些内容可见，定义视角和投影方式。
-
渲染器（Renderer）
将场景和相机的内容渲染到屏幕上，通常使用 WebGLRenderer。
-
几何体（Geometry/Mesh）
3D 对象的形状，结合材质（Material）和网格（Mesh）创建可见对象。
-
光源（Light）
照亮场景，影响材质的外观和阴影效果。
-
引入 Three.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-
创建基本场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Demo</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<script>
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
-
加载外部模型
const loader = new THREE.GLTFLoader();
loader.load('model.glb', (gltf) => {
scene.add(gltf.scene);
});
-
交互控制
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
-
物理模拟
结合 Cannon.js 或 Ammo.js 实现物理效果：
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);
const sphereShape = new CANNON.Sphere(0.5);
const sphereBody = new CANNON.Body({ mass: 1 });
sphereBody.addShape(sphereShape);
world.addBody(sphereBody);
-
后处理效果
使用 EffectComposer 添加景深、辉光、抗锯齿等效果：
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
const composer = new EffectComposer(renderer);
const bloomPass = new UnrealBloomPass();
composer.addPass(bloomPass);
- 3D 模型格式支持：GLTF、OBJ、FBX、STL 等。
- 工具链：Blender（3D 建模）、Three.js Editor（可视化编辑）。
- 扩展库：
- Drei：React 集成工具。
- GSAP：高级动画控制。
- Three-mesh-bvh：高性能碰撞检测。
- 框架：
- React Three Fiber：React 渲染器。
- Svelte Three：Svelte 集成。
- Three.js Boilerplate：项目模板。
- 数据可视化：3D 图表、地理信息系统（GIS）。
- 产品展示：3D 电商展示、交互式说明书。
- 游戏开发：轻量级网页游戏。
- 虚拟 / 增强现实：AR/VR 体验（结合 WebXR API）。
- 教育与模拟：科学可视化、物理模拟。
-
优势：
- 学习曲线平缓：相比直接使用 WebGL，API 更易上手。
- 社区活跃：大量文档、教程和开源项目。
- 性能优化：针对移动设备和低功耗环境做了优化。
-
挑战：
- 复杂场景性能：处理超大规模场景时可能需要优化。
- 调试难度：3D 场景调试比 2D 更复杂。
- 兼容性：老旧浏览器可能不支持 WebGL。
Three.js 是创建网页 3D 体验的首选工具，它平衡了易用性和功能强大性，适合从简单动画到复杂游戏的各种场景。通过其丰富的生态系统和持续更新，开发者可以快速实现创意并部署到任何支持 WebGL 的设备上。对于初学者，建议先掌握基础概念，再逐步探索高级功能和扩展库。
