Skip to content

旋转立方体(正交)

本页是 课程 39 — 3D Mesh 渲染linked + orthographic 示例:注册 DefaultRenderer3DPlugin,用 2D 共享的 view-projection 绘制立方体,深度方向为平行投影;再叠一层 2D 矩形,演示 3D pass 与 2D 矢量同屏合成。

需要 近大远小 的透视效果时,请看 立方体(透视)

实现参考 PR #271

交互示例

要点

  • 相机projection: 'orthographic'(默认 linked 模式)。
  • 插件DefaultPlugins + DefaultRenderer3DPlugin + UIPlugin(仅需画布壳,已隐藏工具栏)。
  • 几何:声明式 type: 'mesh3d'geometry: 'cube' 为默认);无需手动 spawn Mesh3D / Transform3D
  • 动画api.updateNode({ type: 'mesh3d', rotation3d: … }) 更新节点属性;SyncMesh3DNodes 同步 companion mesh。
  • 2D 叠加updateNodes 的矩形画在 3D 之后,可平移缩放画布(手型工具)观察透视与叠加关系。

站点所有交互示例通过 docs/lib/ensure-example-world.ts 统一启动 ECS,默认注册 DefaultRenderer3DPlugin,从任意示例页 SPA 跳转到本页均可正常显示 3D。

Released under the MIT License.