10分钟Three.js基础教程：用threejs-skills吃透Scene、相机与Renderer

学Three.js 基础总是卡在第一关？本文带你用开源项目threejs-skills这份"Three.js 技能包"，在 10 分钟内吃透 3D 开发必备的三大核心：Scene（场景）、相机（Camera）与 Renderer（渲染器），从零搭出第一个会转的 3D 立方体。

为什么选 threejs-skills 学 Three.js 基础？

many 新手学 Three.js 的痛点是：官方文档很全，但不知道"先学什么、怎么写才规范"。threejs-skills 正是为此而生——它把 Three.js 的核心模块整理成 10 份精炼的SKILL.md 技能文档，每份都包含：

• ✅ 最小可运行示例（Quick Start）
• ✅ 准确的 API 说明与构造签名
• ✅ 真实项目中的常见模式
• ✅ 性能优化建议

其中与"场景、相机、渲染器"直接相关的就是 skills/threejs-fundamentals/SKILL.md，本文内容主要依据它整理。

一键获取 threejs-skills 技能包

整个仓库只有几份 Markdown 文件，clone 下来就能读，零依赖：

git clone https://gitcode.com/gh_mirrors/th/threejs-skills

如果你想让 AI 编程助手（如 Claude Code）自动加载这些技能，只需把skills/目录复制到~/.claude/skills/即可，详见 README.md 的 Installation 一节。

三大核心角色：Scene、相机与 Renderer

理解 Three.js，先记住一个类比：

三者缺一不可：渲染器拿着相机，去场景里"取景"，最后输出画面。

Scene 场景：3D世界的"舞台"

Scene是所有 3D 对象的容器，创建它只要一行。除了放物体，它还管两件小事：

• 背景：可以设纯色scene.background = new THREE.Color(0x000000)，也可以换成天空盒纹理
• 雾效：scene.fog = new THREE.Fog(0xffffff, 1, 100)能模拟远近遮挡，让大场景更有纵深感

这些细节都能在 skills/threejs-fundamentals/SKILL.md 的 Core Classes → Scene 小节找到完整写法。

相机 Camera：决定"怎么看"

最常用的是透视相机PerspectiveCamera，它模拟人眼"近大远小"的效果，有 4 个关键参数：

const camera = new THREE.PerspectiveCamera( 75, // fov：视野角度（度），越大越"广角" innerWidth / innerHeight, // aspect：画布宽高比 0.1, // near：近裁剪面，太近的东西会被裁掉 1000, // far：远裁剪面，太远的内容不渲染 );

💡 新手常踩的坑：near和far差距过大（比如 0.001 到 100000）会导致深度精度下降、画面闪烁，保持一个合理的比例即可。

如果做等距游戏、2.5D 场景，则换成正交相机OrthographicCamera——它没有透视变形，物体大小不随距离变化。多相机还有ArrayCamera（分屏）、CubeCamera（实时反射环境贴图），skills/threejs-fundamentals/SKILL.md 的 Cameras 部分都有现成示例。

WebGLRenderer：把3D"渲染"成像素

渲染器负责最终出图，新手需要记住四件事：

1. 创建：new THREE.WebGLRenderer({ antialias: true })，开启抗锯齿画面更平滑
2. 贴到页面：document.body.appendChild(renderer.domElement)
3. 匹配屏幕：setSize()设置尺寸，setPixelRatio(Math.min(devicePixelRatio, 2))避免高分屏发虚
4. 出图：每帧调用renderer.render(scene, camera)

进阶配置（色调映射toneMapping、阴影shadowMap、输出色彩空间outputColorSpace）见同一文档的 WebGLRenderer 小节。

10分钟上手：从零到第一个旋转立方体

把三大核心串起来，一个完整可运行的场景骨架长这样（完整版本见 skills/threejs-fundamentals/SKILL.md 开头的 Quick Start）：

import * as THREE from "three"; // 1. 舞台 + 眼睛 + 渲染器 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); // 2. 摆上一个绿色立方体 const cube = new THREE.Mesh( new THREE.BoxGeometry(1, 1, 1), new THREE.MeshStandardMaterial({ color: 0x00ff00 }) ); scene.add(cube); // 3. 补一盏环境光 + 一盏平行光，否则物体是全黑的 scene.add(new THREE.AmbientLight(0xffffff, 0.5)); const dirLight = new THREE.DirectionalLight(0xffffff, 1); dirLight.position.set(5, 5, 5); scene.add(dirLight); camera.position.z = 5; // 相机往后拉，让立方体进入视野 // 4. 动画循环 + 窗口缩放自适应 function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); window.addEventListener("resize", () => { camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); // 改了 aspect 必须调用 renderer.setSize(innerWidth, innerHeight); });

⚠️ 两个高频坑：

• 画面全黑→ 忘了加灯光。MeshStandardMaterial等标准材质必须靠光照才有颜色，快速排查可临时换MeshBasicMaterial。
• 窗口一拉就变形→ 改camera.aspect后漏掉了camera.updateProjectionMatrix()。

坐标系与对象层级：少走弯路的两个知识

右手坐标系：X 向右、Y 向上、Z 朝向你

Three.js 使用右手坐标系：+X 向右、+Y 向上、+Z 朝向观察者（屏幕外）。拿不准方向时，加一个坐标轴辅助线一目了然：

scene.add(new THREE.AxesHelper(5)); // 红=X 绿=Y 蓝=Z

Object3D：万物皆可"父子"

Mesh、Light、Camera都继承自Object3D，统一拥有position、rotation、scale三个变换属性。利用父子层级可以把一组对象打包成整体：

const group = new THREE.Group(); group.add(头, 身体, 脚); group.rotation.y = Math.PI / 4; // 旋转整体，而不是逐个转 scene.add(group);

这套"舞台→层级→变换"的思路在 skills/threejs-fundamentals/SKILL.md 的 Object3D 与 Group 小节有完整 API 说明。

常见新手问题清单

清理资源的正确姿势（Proper Cleanup）在 fundamentals 文档的 Common Patterns 一节，建议养成"加进场景就要会拆"的习惯。

下一步：threejs-skills 全家桶

基础打通后，这个仓库还有 9 份技能文档等你解锁：

🎯小结：Scene 搭舞台、Camera 定视角、Renderer 出画面——三件套跑通，Three.js 的基础框架就立住了。配合 threejs-skills 里已审计（r160+）的规范示例，你的第一个 3D 项目可以从"能跑"直接走向"跑得稳"。