Engine

@tripo3d/engine · 基于 Three.js 的 ECS 3D 引擎,专为 Tripo 产品中的模型预览、场景编辑、交互控制等 3D 场景封装。

特性

🏗️

ECS 架构

World / Entity / Component / System,自定义组件定义与高效查询

🔌

插件系统

相机、渲染管线、历史、指针事件等作为可插拔系统注册

🎬

Vue 集成

useEngine 组合式 API + createPluginVue 工厂,与 Vue 响应式无缝衔接

↩️

内置历史

自带 Undo/Redo 支持,适合可视化编辑器场景

🎛️

Gizmo 与相机控制

集成 three-viewport-gizmo 与 camera-controls,支持可视化变换与相机操控

📦

轻量分发

Rolldown 打包,ESM + DTS 双输出,按需引入 core 或 vue 入口

安装

请先完成 GitHub Packages 认证配置。

bash

pnpm add @tripo3d/engine three pinia

three 与 pinia 为 peer dependency,需由宿主工程显式安装。

快速开始

import { createEngine } from '@tripo3d/engine';

const engine = createEngine({
  canvas: document.querySelector('canvas')!,
});

engine.start();

在 Vue 中:

vue

<script setup lang="ts">
import { useEngine } from '@tripo3d/engine/vue';

const { engine } = useEngine();
</script>

<template>
  <canvas ref="engine.canvas" />
</template>

下一步

架构总览 — ECS 与插件模型
createEngine — 引擎生命周期
Vue 集成 — 在组件中使用
API Reference — 完整 API 文档(自动生成)
Playground — 交互式测试页(规划中)

Engine ​

特性 ​