3D 仓库作业——单场景内三个交互式低多边形站点
英文原作者： rachid
原始链接： Warehouse operations in 3D, three interactive low-poly sites in one scene
原文核心内容解读
三个低多边形仓库站点被整合在同一个场景中。拖拽可以旋转视角，滚动可以缩放；点击某个站点进入探索，再点击某个区域即可跟随从 收货（receiving） 到 存储（storage）、拣货（picking） 再到 发货（shipping） 的完整作业流。
所有几何体都在 Three.js 中程序化生成，没有使用任何外部 3D 模型。
这是 Octura Solutions 团队的一个实验室演示。欢迎对相机过渡和场景布局提出反馈。
核心代码保留说明
原帖以展示为主，论坛文本中未提供 GLSL/JS 代码块，仅提供了可运行的在线演示地址。因此本文没有可保留的核心代码片段。若需要具体实现，可通过上方演示链接查看运行效果，并结合 Three.js 官方文档反推程序化几何与相机过渡的实现方式。
3 个核心优化要点
1. 程序化生成几何体，消除外部模型依赖
所有仓库结构、货架、托盘等均通过 Three.js 代码直接生成，而不是加载 GLTF/GLB 等外部模型。这样做的好处是：
- 减少网络请求与资源解析时间，降低首屏加载压力；
- 几何体可根据需要动态调整精度，更容易实现低多边形风格；
- 便于按交互层级按需生成或隐藏对象，减少初始显存占用。
2. 单场景整合多站点，用相机过渡代替场景切换
三个低多边形仓库站点共享同一个 WebGL 渲染上下文、材质和光照。交互上通过相机轨道旋转、缩放和平移在不同站点/区域之间移动，而不是频繁切换 Scene 或重新初始化渲染器。这种方式显著降低切换成本，同时让用户体验更连贯。
3. 低多边形风格 + 分层交互控制渲染负载
低多边形模型有效减少三角形数量和 draw call，提升帧率，尤其适合仓库可视化这类需要同时展示大量对象的场景。交互分为两级——先选择站点，再选择区域——避免一次性暴露过多细节，配合相机过渡逐步引导用户关注当前作业流，进一步降低实时渲染压力。
GLSL / WebGL 专业术语检查
原帖中出现的 WebGL / Three.js 相关术语
| 英文术语 | 中文对应 | 备注 |
|---|---|---|
| WebGL | WebGL | 保留英文 |
| Three.js | Three.js | 保留英文 |
| low-poly | 低多边形 | 风格术语 |
| procedural geometry | 程序化几何 | 通过代码生成几何体 |
| camera transition | 相机过渡 | 用于镜头运动 |
| scene layout | 场景布局 | 场景组织方式 |
| orbit | 轨道旋转 | 通常关联 OrbitControls |
| scroll zoom | 滚动缩放 | 相机缩放交互 |
| animation | 动画 | 标签中的术语 |
| receiving / storage / picking / shipping | 收货 / 存储 / 拣货 / 发货 | 仓库作业流程 |
GLSL 术语检查结论
原帖 未出现 GLSL 代码或 GLSL 专属术语，例如 vertexShader、fragmentShader、uniform、varying、attribute、gl_FragColor 等均未涉及。因此本次检查重点集中在 WebGL 与 Three.js 常用术语上，GLSL 层面无需额外纠正。
如果后续 demo 中涉及自定义着色器，建议保留 GLSL 关键术语英文，例如 uniform、varying、vertex shader、fragment shader，避免中文直译造成歧义。
