Three.js 核心组件详解

核心链路：Scene 组织对象，Camera 定义观察视角，Geometry 与 Material 组成可渲染对象，Light 参与光照计算，Renderer 最终把结果绘制到 Canvas。

一、场景（Scene）

核心定位

核心作用

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

基础使用

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

二、相机（Camera）

核心定位

核心作用

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

常用类型

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

// 透视相机：参数(视角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); // 设置相机观察目标（场景原点）

三、渲染器（Renderer）

核心定位

核心作用

• 初始化 WebGL 上下文，使用已有 Canvas 或创建 renderer.domElement，并将其插入页面 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）

核心定位

关键说明

• 旧版 Geometry 已从现代 Three.js 中移除；当前应统一使用 BufferGeometry 及 BoxGeometry、SphereGeometry 等基于它的内置几何体；
• 内置多种基础几何体（立方体、球体、平面、圆柱等），也可自定义顶点数据实现复杂形状；
• 仅定义形状，无视觉外观，需配合材质才能被渲染。

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

// 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）

核心定位

核心作用

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

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

// 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）

核心定位

核心作用

• 作为几何体和材质的桥梁，将两者的属性融合为可渲染的 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）

核心定位

核心作用

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

常用光源类型 & 基础使用

// 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 场景真实感的关键；
• 需要显示或参与场景计算的 Mesh、Line、Points、Light 等对象应加入场景图；Camera 可以直接传给 renderer.render(scene, camera)，并非必须加入场景。
• 渲染器的 render(scene, camera) 是核心入口，帧循环（requestAnimationFrame）是实现 3D 动画的基础。