首页 / three.js / 使用示例
旋转立方体
一个持续自转的立方体,包含场景、透视相机、渲染器、两盏灯与基础材质。 整个页面只有这一段模块脚本,没有构建步骤。
源码与运行效果
说明
这页刻意不引入 OrbitControls,相机固定在
(3.2, 2.4, 4.6),视线指向原点。看画面时可以把注意力放在
「场景里有什么」与「渲染循环怎么跑」两件事上,交互留到轨道控制那一页。
立方体用 MeshStandardMaterial,所以必须有灯光才能看到明暗。
主光是一盏平行光,负责方向与高光;半球光补足暗部,避免背面纯黑。
棱线用独立的 LineSegments 叠在立方体外面,切换线框时可以直接隐藏它。
| 参数 | 取值 | 作用 |
|---|---|---|
相机 fov | 45 | 接近标准镜头,透视变形不明显 |
| 相机距离 | 约 6 | 立方体边长 1.6,画面留白充足 |
| 像素比 | 封顶 2 | 高分屏清晰度与性能的折中 |
| 旋转速度 | 0.8 弧度/秒 | 基于 getDelta(),与刷新率无关 |
| 色彩空间 | sRGB 输出 | 颜色与设计稿一致 |
| 色调映射 | ACES Filmic | 高光过渡更柔和 |
为什么旋转要乘 delta
示例里每帧执行 rotation.y += dt * 0.8。如果直接写
rotation.y += 0.02,在 60 Hz 屏幕上每秒转 1.2 弧度,
在 144 Hz 屏幕上会快两倍多。所有与时间有关的动画都要乘时间增量,
这是三维交互页面最基础的一条。
dt 还做了 Math.min(..., 0.1) 的截断。标签页切到后台再回来时,
第一帧的增量可能是一分钟,不截断会让立方体直接转到另一个角度。
从这一页开始建立单位意识。立方体边长 1.6 没有单位。 放进地理场景时,先决定「1 个场景单位等于多少米」,后面所有坐标、相机距离与模型缩放都以它为准。