Playground
这是 Engine 3.0 的完整交互验证场。它保持旧版 Playground 的 feature 颗粒度和可见能力，同时只使用 3.0 的公开契约，不模拟已经删除的 2.x 生命周期或内部 Composer API。
可验证能力
- 选择本地 GLB 或资源内嵌的 glTF，加载、聚焦、卸载并统计 Mesh、三角形和 BVH；
- 使用
three-mesh-bvh加速拾取，并切换当前模型首个 Mesh 的 BVH Helper； - 使用 CameraControls 旋转、平移、缩放和聚焦相机，并通过 ViewportGizmo 调整视角；
- 点击或 hover Entity，点击空白取消选择，并用紫色轮廓显示当前选择；
- 使用 TransformControls 切换 translate、rotate、scale 或 none，拖拽操作进入独立 History，可撤销和重做；
- 在默认、卡通和漫画材质之间切换，并在模型卸载前恢复借入材质；
- 分别切换 Bloom、Vignette 和 FXAA，验证
after-render、after-output与 auto/manual 输出模式； - 切换透明 Canvas、内缩 viewport、Grid 和 Stats；
- 查看 click、miss、load 和 error 日志；
- 动态 add/get/remove SystemLab，切换 enabled，观察 3.0 的 setup、update、late-update、resize 与销毁阶段，并创建可拾取的 Entity 级 Probe Script。
文件职责
_playground-demos/
├── Playground.vue # 页面组合与布局
├── components/
│ ├── CanvasRuntimeHost.vue # Canvas 接纳后的 DOM runtime 生命周期
│ ├── PlaygroundToolbar.vue # Viewer 功能入口
│ ├── PointerLog.vue # Pointer 日志投影
│ └── SystemLabPanel.vue # 动态 System 验证面板
├── composables/
│ ├── use-engine-playground.ts # SSR 安全构造与 Vue 顶层状态
│ ├── use-playground-controller.ts # UI 命令和标量投影
│ └── use-canvas-runtime.ts # Controls、Gizmo、Stats 的 DOM 接线
├── engine/
│ └── create-playground.ts # Engine、History、Plugin 与静态模块装配
├── module/
│ ├── camera/ # CameraControls 与 ViewportGizmo Pass
│ ├── effect/ # 默认、卡通、漫画材质
│ ├── environment/ # Scene 背景与透明输出
│ ├── grid/ # Grid Entity
│ ├── model/ # Loader、BVH、Entity 接纳与统计
│ ├── pickable/ # Entity 级 Pointer Script
│ ├── pipeline-validation/ # RenderView viewport 验证
│ ├── pointer-log/ # Pointer 与业务事件日志
│ ├── postprocess/ # Bloom、Vignette、FXAA
│ ├── select/ # 选择事实与原生轮廓 Pass
│ ├── stats/ # Stats DOM runtime
│ ├── system-lab/ # 动态 System 与 Probe
│ └── transform/ # TransformControls 与 History 命令
└── shared/ # 业务事件、Loader、BVH 和 Three 工具每个 feature 模块拥有自己的状态、Engine definition 和资源清理。Vue 层只组合功能与投影 UI 标量，不维护第二份场景事实，也不让深响应式代理扩散进 Engine 或 Three.js identity。
Engine 3.0 边界
Entity 接纳
GLTFLoader 返回的 Object3D 子树先由业务持有。加载成功后只调用一次 engine.createEntity(scene)，由 Engine 为整个子树建立一一对应的 Entity，再把根 Entity 加入默认 World。接纳后的标准 Geometry、Material、Texture 和 Skeleton 随 Entity.destroy() 或 Engine dispose 释放。
业务资源
Engine 不替业务猜测非标准资源的所有权。BVH 加速结构、CameraControls、ViewportGizmo、Stats、TransformControls 和业务创建的原生 Pass 都由对应 feature 显式释放。MeshBVHHelper 已经通过 createEntity 接纳，其标准 Geometry 和 Material 由 Entity owner 释放。Loader 在 System 销毁后才返回的 raw Scene 尚未交给 Engine，因此也由模型模块释放。
Pipeline
Playground 只通过 createPass、addPass、removePass 和 setPassEnabled 定制渲染：
- Bloom 与 Vignette 位于
after-render； - FXAA 位于
after-output，启用时同时把 Pipeline 切换为 manual，并作为最终 presenter； - ViewportGizmo 通过
usePass(pass, { target: 'canvas' })在颜色链完成后直接绘制默认 framebuffer； - 选择与漫画轮廓由业务原生 Pass 实现。
页面不会读取 EffectComposer identity 或内部 passes 数组。
Vue 与 DOM
VitePress SSR 阶段不创建 WebGL。浏览器 mounted 后构造 Engine，并用 markRaw 和 shallowRef 保持 Engine/Three identity。Canvas 负责插入唯一 Canvas、启动 Engine，并在卸载时停止和销毁 Engine；依赖容器 DOM 的 Controls、Gizmo、Stats 与 TransformControls 在 Canvas 接纳后安装，并在父级销毁前释放。
SystemLab
SystemLab 展示 Engine 3.0 的真实 System API。旧版中的 onMount、onAwake、onStart、onBeforeRender 和 onAfterRender 已不属于 3.0 System 契约，因此不在面板中伪造。场景级持续逻辑由 System 承担，生成的 Probe 则通过 Script 提供 Entity 级定制行为。
本地模型限制
文件选择器可直接读取 GLB，以及所有资源均内嵌在单文件中的 glTF。引用外部 .bin 或图片的多文件 glTF 需要额外的 URL 映射，不属于旧 Playground 的既有能力；这类资产请先转换为 GLB。