用途:Needle Engine 是构建于 Three.js 之上的 Web 优先 3D 引擎,提供组件系统,并可选配合 Unity/Blender 可视化编辑器。本技能为使用 @needle-tools/engine 的 Web 3D 项目提供引擎上下文。
主要能力与工作流:一,纯代码方式,用 npm create needle 脚手架创建项目,编写 TypeScript 组件(继承 Behaviour),用 onStart、onUpdate、onBeforeRender、onDestroy 等生命周期钩子搭建场景。二,CDN + import maps(无需打包器),适合快速原型或嵌入现有站点,注意 three.js 需来自 @needle-tools/engine/dist/three.min.js。三,Unity 或 Blender 作为可视化编辑器,导出 GLB 到 assets/,组件数据存于 glTF 扩展,运行时由引擎反序列化为 TypeScript 组件;组件编译器会为自定义 TS 组件自动生成编辑器可识别的存根。三种工作流均受支持。
必要用法与要点:项目根目录建议存在代理指令文件(如 CLAUDE.md、.cursorrules、.clinerules)。tsconfig.json 必须设置 "experimentalDecorators": true 与 "useDefineForClassFields": false,否则 @serializable() 反序列化会被静默破坏。序列化字段需用 @serializable() 标注,组件用 @registerType 注册。通过 hooks、<needle-engine> 元素的 context/getContext()、loadfinished 事件或组件生命周期方法访问引擎。needle 为惰性 Proxy,不可在模块顶层访问,需在回调或事件处理中使用,初始化用 onStart(ctx => …)。SSR 框架需动态 import。
构建与部署:使用 npm create needle my-app 及 -t 模板(react、vue、sveltekit、nextjs、react-three-fiber)创建项目。vite.config.ts 必须包含 base: './',否则 Needle Cloud 部署会因绝对路径失效。构建产物 dist 可部署到任意平台。配置 Needle Cloud 部署时使用指定的 GitHub Action 并传入 name,CLI 部署需加 --name。
适用场景与限制:适合 Web 端 3D 展示、交互与多人同步项目。5.1+ 提供类型化绑定与 $components 等实验性 API。资料未提供收费、价格或具体效果数据。