SuperAPI AI 工具集

tresjs-core-skilld

前端与建站

查看项目

更新于 10-16 01:09

技能介绍

用途:@tresjs/core 是 Vue 的 Three.js 自定义渲染器,用 Vue 组件声明式构建 Three.js 场景,任意 THREE 类加 Tres 前缀即可作为组件使用,也支持 kebab-case(自 v5.1.0)。

主要能力:args 传构造函数参数;props 映射实例属性,Math 类型支持数组简写,颜色可用色值字符串;子级材质/几何体经 attach 自动挂载;extend({ MyObject }) 后可把非 THREE 类当作 <TresMyObject> 使用;<primitive :object="..." /> 挂载 JS 中创建的对象,但不负责销毁,需手动 dispose;<TresPortal>(5.9.0)可把子节点重新挂到任意 Object3D/Scene;useLoop 提供 onBeforeRender 等逐帧回调;useLoader 加载资源并返回 { state, isLoading, error, progress, load };useGraph 从加载的 GLTF 场景提取命名节点、材质、网格映射。

使用方式:安装 pnpm i @tresjs/core three,类型定义 pnpm i @types/three -D。Vite 需把 templateCompilerOptions 展开进 Vue 插件,否则 Tres 组件会被当作未知自定义元素告警;Nuxt 应改用 @tresjs/nuxt。仅需编译选项的宿主可用子路径 @tresjs/core/template-compiler-options。v5 起仅 ESM,无 UMD、无 require();peer 依赖 vue >=3.4、three >=0.133。

限制与注意:v5 为破坏性升级,useLoader 不再返回 Promise;指针事件改用原生 DOM 名称(如 @pointerdown),仅第一个被命中的对象触发;useTexture 移入 @tresjs/cientos;useRenderLoop、useCamera、useSeek、useRaycaster、useTresReady、useTresEventManager、useLogger 已移除。WebGL 上下文相关 props 为只读,仅在挂载时设置一次。WebGPU 为实验性,需传 renderer。时间源在 three r179+ 用 Timer,旧版回退 Clock。性能上建议对 Three.js 实例和 primitive 对象用 shallowRef,非游戏场景可用 on-demand 加 invalidate(),并避免随意改动 args 以免重建实例。版本历史与迁移细节见官方 CHANGELOG 与迁移文档。