Engine
@tripo3d/engine是建立在 Three.js 之上的轻量 ECS、可定制渲染管线与鼠标事件运行时。
设计边界
轻量 ECS
Entity 与 Object3D 一一对应；Component 封装 Entity-local setup/cleanup，System 与 Script 分别处理场景级和局部行为
原生渲染能力
Engine 创建唯一 Canvas 与 WebGLRenderer，Scene、Camera、Object3D 和原生 Pass 保持 Three.js identity
两阶段 Pipeline
固定默认 main 与 OutputPass；业务通过 Definition 组合 working-space、输出后处理和直接 Canvas 绘制
鼠标事件
按 topmost RenderView 命中，事件沿 Entity 路由派发，并保留原生 Raycaster 与 Intersection
多 World / View
一个 Canvas 内组合多个 Scene、Camera 与归一化 viewport，渲染和 Pointer 共用同一 View 顺序
低热路径开销
帧内复用上下文与计划数组；排序、资源发现和候选压缩放在 mutation 或真实命中冷路径
Engine 不重新实现 Three.js 的 Scene、Camera、Renderer、Object3D、Raycaster 或 Pass。History 与 Vue 通过独立子入口提供；编辑器策略、Loader 封装、控件、Gizmo 和业务状态管理留给应用。
安装
先完成 GitHub Packages 认证配置，再安装 Engine 与 Three.js：
pnpm add @tripo3d/engine threethree 是 peer dependency，最低支持版本为 >=0.183.0。使用 Vue 入口时还需 Vue >=3.5.0。
最小示例
import { createEngine } from '@tripo3d/engine';
import { BoxGeometry, Mesh, MeshNormalMaterial } from 'three';
const engine = createEngine();
const cube = engine.createEntity(
new Mesh(new BoxGeometry(), new MeshNormalMaterial()),
);
engine.world.root.add(cube);
document.querySelector('#app')!.append(engine.canvas);
engine.start();Engine 初始为 stopped。默认 World、全屏 RenderView 和透视 Camera 已经创建；没有业务 Pass 时，固定的默认 main 与 OutputPass 自动完成上屏。
Vue 应用推荐让 <Canvas> 接管 DOM、启停和最终销毁：
<script setup lang="ts">
import { createEngine } from '@tripo3d/engine';
import { Canvas, createPluginVue } from '@tripo3d/engine/vue';
import { markRaw, shallowRef } from 'vue';
const engine = shallowRef(markRaw(createEngine({
plugins: [createPluginVue()],
})));
</script>
<template>
<Canvas :engine="engine" />
</template>