Three.js 核心组件详解

Ai 摘要：Three.js是基于WebGL的3D图形库，其核心组件包括渲染器、相机、场景、几何体、网格、材质和光源。场景是所有3D元素的容器；相机定义了观察视角；渲染器则将场景与相机结合，最终将3D图像绘制到屏幕上。这些组件协同工作，共同完成从3D场景构建到屏幕渲染的完整流程。

Three.js 是基于 WebGL 的 3D 图形库，渲染器、相机、场景、几何体、网格、材质、光源 是其构建 3D 世界的七大核心基础组件，各司其职、协同工作，共同实现从 3D 场景构建到屏幕像素渲染的完整流程。以下是各组件的详细介绍、核心作用及基础使用方式：

一、场景（Scene）

核心定位

Three.js 中所有 3D 物体、光源、相机的 “容器 / 根节点”，是 3D 世界的 “舞台”，负责管理所有需要被渲染的对象（物体、光源等），本身无视觉形态，仅承担对象组织、层级管理、场景图维护的作用。

核心作用

作为所有 3D 元素的统一挂载载体，相机只能渲染当前场景内的对象；
支持对象的添加（add()）、移除（remove()），实现场景内元素的动态管理；
可嵌套子场景，实现复杂 3D 场景的层级化拆分。

基础使用

import * as THREE from 'three';
// 创建空场景
const scene = new THREE.Scene();
// 后续可将物体、光源等添加到场景中
// scene.add(mesh, light);

二、相机（Camera）

核心定位

3D 世界的 “观察者 / 眼睛”，定义了从哪个视角、以何种投影方式观察场景，是连接 3D 场景和 2D 屏幕的 “桥梁”，决定了最终哪些区域的场景会被渲染到屏幕上。

核心作用

确定观察位置、观察目标、向上方向（三维空间的观察姿态）；
通过投影矩阵将 3D 三维坐标转换为 2D 屏幕坐标，是 3D 可视化的核心环节；
支持视角调整、位置移动，实现第一人称、第三人称等不同观察效果。

常用类型

Three.js 提供多种相机，最常用的是透视相机（PerspectiveCamera）（模拟人眼近大远小的视觉效果，适合大部分 3D 场景）和正交相机（OrthographicCamera）（无透视畸变，适合 2.5D、工程制图、UI 渲染）。

基础使用（透视相机，最常用）

// 透视相机：参数(视角FOV, 宽高比, 近裁剪面, 远裁剪面)
const camera = new THREE.PerspectiveCamera(
  75, // 视角，范围一般45-90，值越大视野越广
  window.innerWidth / window.innerHeight, // 画布宽高比，匹配窗口避免拉伸
  0.1, // 近裁剪面：距离相机小于此值的对象不渲染
  1000 // 远裁剪面：距离相机大于此值的对象不渲染
);
camera.position.z = 5; // 设置相机位置（沿Z轴向前5个单位）
camera.lookAt(0, 0, 0); // 设置相机观察目标（场景原点）
scene.add(camera); // 相机需添加到场景中（默认可省略，建议显式添加）

三、渲染器（Renderer）

核心定位

Three.js 的 “画笔 / 画布”，是连接 3D 数据和浏览器屏幕的最终执行单元，底层封装 WebGL 接口，负责将「相机视角下的场景」渲染为 2D 像素图像，并输出到浏览器的 DOM 元素中（通常是 <canvas>）。

核心作用

初始化 WebGL 上下文，创建渲染画布（<canvas> 元素），并插入到页面 DOM；
执行渲染循环，将 3D 场景的几何、材质、光源等数据转换为 WebGL 可识别的指令；
处理抗锯齿、像素比、画布尺寸、渲染模式（实时光照 / 阴影）等核心渲染逻辑；
提供 render() 方法，完成「场景 + 相机」到 2D 屏幕的最终绘制。

基础使用

// 创建WebGL渲染器，开启抗锯齿
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight); // 设置画布尺寸
renderer.setPixelRatio(window.devicePixelRatio); // 适配设备像素比，避免模糊
document.body.appendChild(renderer.domElement); // 将canvas插入页面

// 核心渲染方法：将场景和相机渲染到canvas
function animate() {
  requestAnimationFrame(animate); // 帧循环，实现动画
  renderer.render(scene, camera); // 每次帧循环执行渲染
}
animate();

四、几何体（Geometry/BufferGeometry）

核心定位

3D 物体的 **“骨架 / 形状基础”，用于定义物体的空间几何结构 **，本质是由顶点（顶点坐标）、面（顶点连接关系）、法线（光照计算） 等几何数据组成的集合，决定了物体的外形（如立方体、球体、平面）。

关键说明

Three.js 中有两类几何体：Geometry（高层封装，易用但性能一般，已逐步废弃）和 BufferGeometry（底层二进制数据，性能优异，推荐使用）；
内置多种基础几何体（立方体、球体、平面、圆柱等），也可自定义顶点数据实现复杂形状；
仅定义形状，无视觉外观，需配合材质才能被渲染。

常用内置几何体 & 基础使用

// 1. 立方体几何体：参数(宽度, 高度, 深度)
const cubeGeo = new THREE.BoxGeometry(1, 1, 1);

// 2. 球体几何体：参数(半径, 水平分段数, 垂直分段数)，分段数越高越光滑
const sphereGeo = new THREE.SphereGeometry(0.5, 32, 32);

// 3. 平面几何体：参数(宽度, 高度)，默认在XY平面
const planeGeo = new THREE.PlaneGeometry(2, 2);

// 4. 圆柱几何体：参数(顶部半径, 底部半径, 高度, 径向分段数)
const cylinderGeo = new THREE.CylinderGeometry(0.3, 0.3, 1, 16);

五、材质（Material）

核心定位

3D 物体的 **“皮肤 / 视觉外观”，用于定义物体表面的视觉属性 **，决定了几何体在渲染时的颜色、纹理、光泽度、透明度、反光性、是否受光照影响等视觉特征，是物体能被看到的关键。

核心作用

描述物体表面对光线的响应方式（如漫反射、镜面反射、自发光）；
支持颜色、纹理（图片 / 视频）、透明度、金属度 / 粗糙度（PBR 物理渲染）等属性配置；
需与几何体绑定，才能形成有视觉外观的 3D 物体；
不同材质对光源的依赖不同（如基础材质无需光源，漫反射材质必须有光源才能显示）。

常用基础材质分类 & 基础使用

Three.js 材质分无需光源（自发光，仅显示基础颜色 / 纹理）和需要光源（实时光照计算，更真实）两类，常用的有：

// 1. 基础材质（MeshBasicMaterial）：无需光源，纯色/纹理，无光照效果
const basicMat = new THREE.MeshBasicMaterial({
  color: 0x00ff00, // 颜色（十六进制），绿色
  wireframe: true, // 线框模式，显示几何体骨架
  transparent: true, // 开启透明
  opacity: 0.7 // 透明度
});

// 2. 漫反射材质（MeshLambertMaterial）：需要光源，漫反射效果，哑光质感
const lambertMat = new THREE.MeshLambertMaterial({
  color: 0xff0000, // 红色
  side: THREE.DoubleSide // 双面渲染（默认仅渲染正面）
});

// 3. 高光漫反射材质（MeshPhongMaterial）：需要光源，有镜面高光，光泽质感
const phongMat = new THREE.MeshPhongMaterial({
  color: 0x0000ff, // 蓝色
  shininess: 100 // 高光亮度，值越大高光越集中
});

// 4. 物理基础材质（MeshStandardMaterial）：推荐！PBR物理渲染，最真实，需要光源
const standardMat = new THREE.MeshStandardMaterial({
  color: 0xffff00, // 黄色
  metalness: 0.8, // 金属度（0-1），0为非金属，1为纯金属
  roughness: 0.2, // 粗糙度（0-1），0为镜面，1为哑光
  map: new THREE.TextureLoader().load('texture.jpg') // 加载纹理图片
});

六、网格（Mesh）

核心定位

Three.js 中最基础、最常用的可渲染 3D 物体，是几何体（Geometry）和材质（Material）的 “组合体” —— 将定义形状的几何体和定义外观的材质绑定，形成一个既有形状、又有视觉外观的完整 3D 对象，也是唯一能被渲染器渲染的 “实体对象”。

核心作用

作为几何体和材质的桥梁，将两者的属性融合为可渲染的 3D 实体；
继承 Three.js 的 Object3D 类，支持位置、旋转、缩放等空间变换，也可添加到场景中参与渲染；
是构建 3D 场景中所有实体物体（如立方体、球体、模型）的基础单元。

基础使用（几何体 + 材质 → 网格 → 场景）

// 1. 创建几何体和材质
const geo = new THREE.BoxGeometry(1, 1, 1); // 立方体骨架
const mat = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); // 绿色PBR材质

// 2. 组合为网格（核心步骤：骨架+皮肤=实体）
const cubeMesh = new THREE.Mesh(geo, mat);

// 3. 网格的空间变换（位置、旋转、缩放）
cubeMesh.position.set(0, 0, 0); // 设置位置（x,y,z）
cubeMesh.rotation.y = Math.PI / 4; // 沿Y轴旋转45度
cubeMesh.scale.set(1.2, 1.2, 1.2); // 等比缩放1.2倍

// 4. 添加到场景中（只有添加到场景，才能被相机看到、渲染器渲染）
scene.add(cubeMesh);

七、光源（Light）

核心定位

3D 场景的 **“光源 / 照明系统”，用于模拟现实世界的光照效果 **，为场景提供亮度，决定了物体的明暗、阴影、色彩表现，是让 3D 场景更具立体感、真实感的核心组件（无光源时，大部分材质会显示为黑色）。

核心作用

为需要光照的材质（如 MeshLambertMaterial、MeshStandardMaterial）提供光照计算的基础；
模拟不同类型的现实光源（环境光、平行光、点光源、聚光灯等），实现多样化的照明效果；
支持配置光源颜色、亮度、照射范围、阴影投射 / 接收等属性，增强场景的层次感。

常用光源类型 & 基础使用

Three.js 提供多种光源，各司其职，通常组合使用（如环境光 + 平行光，模拟自然光），常用的有：

// 1. 环境光（AmbientLight）：基础漫射光，均匀照亮整个场景，无方向、无阴影
// 作用：避免物体背光面完全变黑，作为基础照明
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3); // 参数(颜色, 强度)
scene.add(ambientLight);

// 2. 平行光（DirectionalLight）：模拟太阳光，单向平行光线，有方向、可投射阴影
// 作用：主光源，塑造物体明暗对比，产生阴影
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(5, 5, 5); // 设置光源位置（位置决定照射方向）
dirLight.castShadow = true; // 开启阴影投射
scene.add(dirLight);

// 3. 点光源（PointLight）：模拟灯泡，从一个点向四周发射光线，有衰减、可投射阴影
// 作用：辅助光源，模拟局部照明（如台灯、灯泡）
const pointLight = new THREE.PointLight(0xff9900, 0.6, 10); // 参数(颜色, 强度, 照射距离)
pointLight.position.set(-3, 2, 4);
scene.add(pointLight);

// 4. 聚光灯（SpotLight）：模拟手电筒/舞台灯，锥形光线，有方向、衰减、可投射阴影
// 作用：局部定向照明，突出特定物体
const spotLight = new THREE.SpotLight(0xffffff, 0.5);
spotLight.position.set(2, 4, 3);
spotLight.target = cubeMesh; // 设置照射目标（指向场景中的网格）
spotLight.angle = Math.PI / 6; // 锥形角度，值越小光线越集中
scene.add(spotLight);

八、七大组件核心协作流程

以上组件并非独立存在，而是形成 **“场景承载 → 相机观察 → 网格构成实体 → 光源提供照明 → 渲染器最终绘制”** 的完整协作链路，核心流程如下：

创建容器：新建 Scene 作为所有元素的根容器；
创建观察者：新建 Camera，设置位置和观察目标，添加到场景；
构建 3D 实体：新建 BufferGeometry（形状）+ Material（外观），组合为 Mesh（可渲染实体），设置空间变换后添加到场景；
添加照明：新建各类 Light（环境光 + 主光源为主），添加到场景，为材质提供光照计算；
创建渲染器：新建 WebGLRenderer，配置画布尺寸并插入页面 DOM；
循环渲染：通过 requestAnimationFrame 实现帧循环，每次调用 renderer.render(scene, camera)，将相机视角下的带光照场景渲染为 2D 像素图像，输出到屏幕。

核心总结

场景是容器，相机是观察者，渲染器是最终绘制者，三者是 Three.js 渲染的基础框架；
几何体是形状骨架，材质是视觉皮肤，网格是两者的组合体（可渲染实体），是 3D 物体的核心构成；
光源是照明系统，为需要光照的材质提供亮度和立体感，是 3D 场景真实感的关键；
所有可渲染对象（网格、光源、相机）必须添加到场景中，才能被渲染器识别和绘制；
渲染器的 render(scene, camera) 是核心入口，帧循环（requestAnimationFrame）是实现 3D 动画的基础。