经纬志
首页 / three.js / 使用示例

旋转立方体

一个持续自转的立方体,包含场景、透视相机、渲染器、两盏灯与基础材质。 整个页面只有这一段模块脚本,没有构建步骤。

three.js 0.160.0 · 更新 2026-10-27
源码与运行效果
运行效果

说明

这页刻意不引入 OrbitControls,相机固定在 (3.2, 2.4, 4.6),视线指向原点。看画面时可以把注意力放在 「场景里有什么」与「渲染循环怎么跑」两件事上,交互留到轨道控制那一页。

立方体用 MeshStandardMaterial,所以必须有灯光才能看到明暗。 主光是一盏平行光,负责方向与高光;半球光补足暗部,避免背面纯黑。 棱线用独立的 LineSegments 叠在立方体外面,切换线框时可以直接隐藏它。

参数取值作用
相机 fov45接近标准镜头,透视变形不明显
相机距离约 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 个场景单位等于多少米」,后面所有坐标、相机距离与模型缩放都以它为准。