Skip to content

透视立方体

本页是 课程 39 — 3D Mesh 渲染linked + perspective 示例:3D 相机跟随 2D 平移与缩放,立方体用画布坐标 translation: [100, 100, 40] 放置(与 2D 节点的 x/y 同系),旋转时可看到各面 近大远小

对比 正交立方体projection: 'orthographic'),正交模式下深度不会改变屏幕上的相对大小。

实现与仓库内 packages/webcomponents/examples/main.ts、快照测试 __tests__/ecs/cube-perspective.spec.ts 一致。

交互示例

要点

  • 相机Camera3D({ linked: true, projection: 'perspective', clearColor: false })CameraSync 每帧同步 2D 的 (x, y, zoom)
  • 坐标Transform3D.translation 使用 画布 Y 向下(x, y, z),不要对 x/y 再调用 canvasWorldToWorld3D
  • 透视MeshPipeline3D 用 2D viewProjectionMatrix 对齐平移/翻转,深度方向按 translation.z 与锚点做透视缩放。
  • 2D 叠加:半透明矩形画在 3D 之后;用手型工具拖动画布,立方体应与 2D 图层 同向 平移、缩放。

与正交示例的差异

项目cube本页
projectionorthographicperspective
深度表现各面平行投影,大小不随远近变化近大远小
典型 translation[200, 100, 40][100, 100, 40]
适用extrude3d、与 2D 严格对齐Spline 式 2D+3D 透视场景

Released under the MIT License.