YL

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.

相关提示词

标签