SuperAPI AI 工具集

threejs-dev-setup

前端与建站

查看项目

更新于 10-15 21:48

技能介绍

用途:在新建或配置 three.js 项目时提供安装与工具链指导,处理打包器入口、浏览器 importmap、three 包安装与版本对齐、TypeScript 配置,以及 three/addons/...、examples/jsm、ESM 与 CJS 互操作、裸模块说明符解析等导入报错。

主要能力:确认交付模式(Vite/Webpack 等 SPA 打包器、Node 工具链,或带 importmap 的静态 HTML),因为不同模式决定 three/addons/ 的解析方式;将 three 版本固定到与所引文档兼容的发行版;给出规范导入写法——核心从 three 导入,控制器、加载器、效果从 three/addons/... 导入(源码树中映射到 examples/jsm);提供最小验证循环(渲染器、场景、相机、一个网格加 requestAnimationFrame);TypeScript 下启用适配打包器的 moduleResolution 并引用 three 包类型;失败时区分缺少依赖、路径错误与 SSR 环境(无 window/document)。

使用方式:先确认打包器或运行时与目标 three 版本,再按该版本包布局给出导入行;脚手架跑通后可参考 three.js 手册第一章继续深入。权威资料为 https://threejs.org/manual/ 、https://threejs.org/docs/ 与 https://www.npmjs.com/package/three 。

适用场景:新建 three.js 项目、配置打包入口或 importmap、安装并对齐 three 版本、排查 addon 导入与模块解析错误。

限制:不涉及 WebGL 理论、渲染目标与后期处理栈、物理引擎,以及“构建可运行”之外的部署内容;这些属于 threejs-renderers、threejs-postprocessing 等运行时主题。注意同一页面混用多份 three 会破坏单例,需用打包器别名去重;避免从 node_modules 深层 examples/jsm 路径导入,优先使用 three/addons/...;SSR 框架需动态导入或仅客户端组件。