Skip to content

旋转立方体(正交)

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

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

实现参考 PR #271

交互示例

要点

  • 相机projection: 'orthographic'(默认 linked 模式)。
  • 插件DefaultPlugins + DefaultRenderer3DPlugin + UIPlugin(仅需画布壳,已隐藏工具栏)。
  • 几何Mesh3D 传入 positions / normals / indices;示例用 procedural 立方体(每面 4 顶点、2 三角)。
  • 动画:在 requestAnimationFramecubeEntity.write(Transform3D)MeshPipeline 检测到 3D 组件变更后会重绘。
  • 2D 叠加updateNodes 的矩形画在 3D 之后,可平移缩放画布(手型工具)观察透视与叠加关系。

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

Released under the MIT License.