Canvas

Canvas 来自 @tripo3d/engine/vue，负责 DOM 接纳、Engine 启停和最终销毁。

用法

<script setup lang="ts">
import { createEngine } from '@tripo3d/engine';
import { Canvas, createPluginVue } from '@tripo3d/engine/vue';
import { markRaw, onMounted, shallowRef } from 'vue';
import type { Engine } from '@tripo3d/engine';

const engine = shallowRef<Engine | null>(null);

onMounted(() => {
  engine.value = markRaw(createEngine({
    plugins: [createPluginVue()],
  }));
});
</script>

<template>
  <Canvas v-if="engine" :engine="engine">
    <div class="hud">Overlay</div>
  </Canvas>
</template>

Props 与 slot

名称	类型	默认值	说明
engine必填	Engine	—	组件接纳后取得 start/stop/final dispose authority 的 Engine。

默认 slot 渲染到 Canvas 上方 overlay。overlay 默认 pointer-events: none；需要交互的后代自行设置 pointer-events: auto。

生命周期

• mounted：验证 Engine Canvas 没有 foreign parent，插入后调用 start()；
• prop replacement：先完整释放旧 Engine，再接纳新 identity；
• unmount：按 stop → dispose → detach 尽力清理；
• 单错原样抛出，多错形成扁平 AggregateError。

组件始终 dispose 已接纳 Engine，不提供 autoDispose 或 remount 保留状态选项。不要在父组件重复销毁。

相关

• Vue 指南
• createPluginVue