古法编程

快速上手 Three.js 3D 场景构建基础

解决 3D 场景搭建的入门痛点：通过一套标准的工作流，快速配置 Three.js 的核心组件（场景、相机、渲染器），并掌握 3D 空间的坐标变换与物体层级管理。

为什么需要这个技能

在 Web 端实现 3D 视觉效果时，Three.js 是最主流的库，但其核心概念（如渲染循环、投影矩阵、坐标系）对于初学者有一定门槛。

如果你直接跳到复杂的着色器（Shader）或后期处理，而没有扎实的基础架构知识，很容易在处理物体旋转、相机跟随或内存泄漏（如忘记释放 Geometry）时遇到难以调试的 Bug。掌握基础构建技能，能让你在开发任何 3D 应用之前，先搭建出一个稳定、高性能的运行环境。

适用场景

  • 从零开始搭建 Web 3D 场景的基本框架。
  • 处理窗口大小自适应（Resize）与响应式画布。
  • 构建复杂的 3D 物体层级关系（父子节点绑定）。
  • 进行基础的 3D 空间数学运算（向量、矩阵、四元数）。
  • 实现简单的 3D 动画循环与物体变换。

核心工作流

1. 环境初始化

构建 3D 场景必须包含“三要素”：Scene（场景容器）、Camera（相机视角）和 WebGLRenderer（渲染器）。

import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
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);

2. 物体构建与层级管理

使用 Mesh（几何体 + 材质）创建物体，并通过 Object3D 的层级结构（如 Group）来组织场景。Three.js 使用的是右手坐标系（+X 向右，+Y 向上，+Z 向屏幕外）。

const group = new THREE.Group();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

group.add(cube); 
scene.add(group);

3. 渲染循环与动画

建议使用 renderer.setAnimationLoop 代替原生的 requestAnimationFrame 以获得更好的 WebXR 兼容性。

renderer.setAnimationLoop(() => {
  cube.rotation.x += 0.01;
  renderer.render(scene, camera);
});

4. 资源清理

为了避免 WebGL 内存泄漏，在移除物体时必须手动调用 .dispose() 释放几何体和材质。

function disposeMesh(mesh) {
  mesh.geometry.dispose();
  if (Array.isArray(mesh.material)) {
    mesh.material.forEach(m => m.dispose());
  } else {
    mesh.material.dispose();
  }
  scene.remove(mesh);
}

下载和安装

下载 threejs-fundamentals 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐