BOOTSTRAP · Vite + three
Vite + Three.js 工程脚手架Vite + Three.js project scaffold
生成可 npm run dev 的 Vite 工程:模块化拆分 scene / camera / renderer,并预留 assets 目录。
效果预览
轻量 WebGL 示意(非完整工程实现),可拖拽旋转;完整逻辑见下方提示词。
预期产出 · Returns
package.json、vite.config、src/main.js、src/scene.js 等;README 含安装与 dev 命令。
适合用在哪
准备长期改 3D 项目、需要热更新与 npm 依赖管理时。
容易踩的坑
- OrbitControls 必须从 examples/jsm 路径导入,版本要与 three 一致。
提示词 · Prompt
创建一个 Vite + vanilla JS 的 Three.js 项目脚手架:
- 使用 npm,依赖 three(最新稳定版);
- src/main.js 只负责 bootstrap;src/core/createRenderer.js、createCamera.js、createLights.js、createScene.js 拆分职责;
- 全屏 canvas,处理 resize;
- 默认场景:地面 GridHelper + 一个 TorusKnot + OrbitControls(从 three/examples/jsm/controls/OrbitControls.js 导入);
- vite.config 不要设置奇怪的 base;
- README 用中文写清:npm install、npm run dev、npm run build。
输出每个文件的完整内容。
Scaffold Vite + vanilla JS + three: split createRenderer/Camera/Lights/Scene, OrbitControls, README in Chinese with npm scripts.