Three.js 入门（二）— 使用Vite快速构建3D开发环境

1. 为什么选择Vite搭建Three.js开发环境第一次接触Three.js时我用的是Parcel构建工具虽然配置简单但随着项目复杂度提升发现热更新速度越来越慢。后来尝试了Vite简直像换了一台新电脑 - 一个200模块的项目Parcel热更新要5-8秒Vite基本在200ms内完成。这种开发体验的提升对需要频繁调整参数的3D开发尤为重要。Vite的核心优势在于利用了浏览器原生ES模块支持。传统打包工具需要完整构建整个应用才能启动开发服务器而Vite直接将模块按需编译返回给浏览器。特别是在Three.js开发中我们经常需要微调材质参数、光照角度快速看到效果能极大提升工作效率。实测对比基于MacBook Pro M1冷启动时间Vite 1.2s vs Parcel 4.7s热更新速度Vite 200ms vs Parcel 3.5s内存占用Vite 180MB vs Parcel 420MB2. 五分钟快速搭建基础环境2.1 初始化项目先确保系统已安装Node.js 16版本推荐使用LTS版本然后在终端执行mkdir threejs-vite cd threejs-vite npm init -y npm install three types/three npm install vite --save-dev这里有个小技巧安装types/three类型定义包可以避免VS Code中Three.js API的红色波浪线警告即使你写的是纯JavaScript代码也建议安装。2.2 基础目录结构创建如下文件结构├── src/ │ ├── index.html │ ├── main.js │ └── style.css ├── package.json └── vite.config.jsindex.html内容注意script标签的typemodule!DOCTYPE html html langen head meta charsetUTF-8 titleThree.js with Vite/title link relstylesheet href./style.css /head body script src./main.js typemodule/script /body /html2.3 配置Vite开发服务器在vite.config.js中添加基础配置import { defineConfig } from vite export default defineConfig({ server: { port: 3000, open: true // 自动打开浏览器 } })然后在package.json中添加启动脚本scripts: { dev: vite, build: vite build }现在运行npm run dev你会看到一个空白页面但控制台应该没有错误。这个基础环境已经可以支持Three.js开发了。3. 创建第一个3D场景3.1 场景初始化在main.js中我们先搭建Three.js的三大核心组件import * as THREE from three // 1. 创建场景相当于一个3D世界容器 const scene new THREE.Scene() scene.background new THREE.Color(0x222222) // 2. 创建相机相当于观察者的眼睛 const camera new THREE.PerspectiveCamera( 75, // 视野角度(FOV) window.innerWidth / window.innerHeight, // 宽高比 0.1, // 近裁面 1000 // 远裁面 ) camera.position.z 5 // 相机向后移动5个单位 // 3. 创建渲染器相当于绘图板 const renderer new THREE.WebGLRenderer({ antialias: true }) renderer.setSize(window.innerWidth, window.innerHeight) document.body.appendChild(renderer.domElement)这里有个实用技巧给场景设置背景色可以避免默认的透明背景导致的视觉混淆。我常用的是深灰色(0x222222)既不会太刺眼又能清晰看到物体轮廓。3.2 添加立方体并实现动画接下来我们添加一个旋转的立方体// 创建立方体 const geometry new THREE.BoxGeometry(1, 1, 1) const material new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true // 线框模式便于调试 }) const cube new THREE.Mesh(geometry, material) scene.add(cube) // 动画循环 function animate() { requestAnimationFrame(animate) cube.rotation.x 0.01 cube.rotation.y 0.01 renderer.render(scene, camera) } animate()保存后你会立即在浏览器中看到一个旋转的绿色线框立方体 - 这就是Vite的热更新在起作用。试着修改color参数为0xff0000保存后几乎瞬间就能看到立方体变成红色。4. 高级配置与优化技巧4.1 处理窗口大小变化3D场景需要响应窗口尺寸变化添加以下代码window.addEventListener(resize, () { camera.aspect window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) })4.2 添加性能监控安装three.js的性能监控工具npm install three-stats然后在main.js中添加import Stats from three-stats const stats new Stats() document.body.appendChild(stats.dom)在animate函数中更新statsfunction animate() { stats.update() // ...原有动画代码 }现在页面左上角会显示FPS、帧时间等性能指标对优化很有帮助。4.3 配置GLSL文件支持Three.js开发中经常需要编写着色器代码配置Vite支持.glsl文件导入先安装插件npm install vite-plugin-glsl --save-dev修改vite.config.jsimport glsl from vite-plugin-glsl export default defineConfig({ plugins: [glsl()], // ...其他配置 })现在可以直接导入GLSL文件import fragmentShader from ./shaders/fragment.glsl import vertexShader from ./shaders/vertex.glsl5. 常见问题与解决方案5.1 静态资源加载问题当需要加载纹理、模型等资源时推荐将资源放在public目录或使用Vite的特殊处理// 错误方式 const texture new THREE.TextureLoader().load(../assets/texture.jpg) // 正确方式资源放在public目录 const texture new THREE.TextureLoader().load(/texture.jpg) // 或使用Vite的import.meta.url import textureUrl from ./assets/texture.jpg?url const texture new THREE.TextureLoader().load(textureUrl)5.2 生产环境构建优化构建时添加以下配置可显著减小包体积// vite.config.js export default defineConfig({ build: { rollupOptions: { output: { manualChunks: { three: [three] } } } } })这会将three.js单独打包利用浏览器缓存优势。5.3 TypeScript支持如果想使用TypeScript只需安装依赖npm install typescript types/node --save-dev然后重命名main.js为main.tsVite会自动处理类型检查。Three.js的类型定义已经通过types/three提供。