第1章 开工搭台：场景、相机与渲染器

第 1 章 · 开工搭台：场景、相机与渲染器

章节摘要：本章跟着一张工单走：从一张白页开始，把场景地台、渲染器动力电、相机机位这三件套逐一装配到位，再经下料工位装上第一件几何体，产出整条装配线的首件样板——一个能旋转、能被看到、参数全都讲得出处的小立方体。

一条主线

假设你接到的第一单是展厅项目里的"电子沙盘原型"：一块深色底板，上面放一个会自转的标识方块，客户下周要看到能在浏览器里打开的链接。这单不难，但它是整条产线的起点——所有后续工序（布光、上漆、架机位、装传动）都基于这个沙盘继续装配，所以这一章的每一颗螺丝都要拧得明明白白。

主线从"为什么是三件套"展开。Three.js 里最先要理解的分工是：场景（Scene）是地台，负责承载一切物件与灯光，它自己不显示任何东西；渲染器（WebGLRenderer）是动力电与出货口，把地台上的三维数据换算成屏幕上的像素；相机（Camera）是机位，决定从哪个角度、以多大的视野去看地台。三者缺一，屏幕就是一片黑——而黑屏恰恰是初学者报告最多的事故，本章会专门演示三件套各自缺席时的故障样貌，让你以后见到黑屏能在十秒内锁定工位。

三件套就位后，下料工位开始供件。几何体（Geometry）定义物体的形状数据，材质（Material）决定它此刻的表面表现，两者拼装成网格（Mesh）才能上台。首件样板选 BoxGeometry 不是偷懒：立方体六个面朝向各不相同，旋转时有没有装反、灯光有没有照到、面数对不对，一眼就能验出来，是天然的验收件。

沿途站点

第一站 1.1 装配线总览：把场景、相机、渲染器、网格四个概念放到同一张站位图上，逐个讲清职责边界，然后写出首件样板的最短代码，并拆解其中每一行的工序归属。读完这一站，你应当能对着任何一段 Three.js 入门代码，说出"哪几行是搭台、哪几行是下料"。

第二站 1.2 工位搭建：真正开工前要把车间接好电——模块化引入 Three.js 的两种方式、页面容器与尺寸自适应、像素比与抗锯齿的初始配置，以及一套用了就不想撤的调试习惯（场景辅助线、坐标轴、帧率监视）。工位不牢，后面每章都要返工。

第三站 1.3 下料工位：盘点 Three.js 自带的几何体谱系，重点讲清参数与三角面数的关系——同样是球体，分段数差一档，顶点量能差十倍。这站产出的不只是几个形状，还有"用参数换面数"的成本意识，它是第 8 章性能质检的地基。

图：本章工段装配概览

拐点与结论

本章最大的认知转折在 1.1：Three.js 的一切"看不见"，几乎都能归因到三件套有一件没接好——场景里没东西、相机没对准、渲染器没挂到页面，或者渲染循环根本没启动。把"黑屏"从一个笼统的恐慌，拆解成四个可逐一排查的工位故障，是本章给你的第一件称手工具。

第二个转折在 1.3：几何体不是"画出来的"，是"算出来的"。BoxGeometry 的 widthSegments、SphereGeometry 的 widthSegments 这些参数直接决定顶点缓冲区的大小，进而决定这一件货占多少显存与绘制开销。从首件样板开始就带着面数意识写代码，后面的粒子、实例化、性能优化才会水到渠成。

读完你应该

• 独立写出三件套的最小可运行代码，并解释每一行的工序归属；
• 面对黑屏，按"场景空、机位偏、渲染器未挂载、循环未启动"四条线索逐一排查；
• 用模块化方式在页面中引入 Three.js，并完成尺寸自适应与像素比配置；
• 说出常用几何体的参数含义，估算给定分段数下的三角面数量；
• 把一个新几何体替换进首件样板并保持程序稳定运行。

下一章的接力

首件样板目前穿的是 MeshBasicMaterial——一种不吃光照的材质，颜色直接画上去，所以它看起来像色块而非实物。这正是下一章布光工位的开工理由：换上受光材质，布下第一盏灯，让样板第一次拥有明暗与影子。