vite three.js

### 如何在Vite项目中集成和使用Three.js进行3D图形开发 #### 创建Vite项目并安装依赖项 为了开始，在本地环境中创建一个新的Vite项目。通过命令行工具执行如下操作： ```bash npm create vite@latest my-3d-app --template vanilla cd my-3d-app ``` 接着，安装`three`库作为项目的依赖之一。 ```bash npm install three ``` 这一步骤确保了Three.js被正确引入到项目当中[^1]。 #### 初始化渲染器、场景以及相机 编辑入口文件（通常是`index.html`中的`<script type="module">...</script>`部分），加入必要的初始化代码来设置基本的WebGL环境: ```javascript import * as THREE from 'three'; // 设置渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建场景对象 const scene = new THREE.Scene(); // 定义透视投影相机(视场角,宽高比,近裁剪面,远裁剪面) const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 5; ``` 上述代码片段完成了基础框架搭建工作，包括定义了一个简单的三维空间——即所谓的“场景”，并且设置了观察者视角的位置。 #### 添加几何体与材质 继续在同一脚本标签内编写更多逻辑以构建具体的物体实例，并赋予其外观特性： ```javascript // 几何形状 - 正方体 const geometry = new THREE.BoxGeometry(); // 材质属性 - 平滑着色 const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); // 合成网格模型 const cube = new THREE.Mesh(geometry, material); scene.add(cube); // 将立方体添加至场景之中 ``` 这里展示了如何利用预设好的类快速生成具有特定形态的对象，并指定它们的颜色表现形式。 #### 实现动画效果 为了让页面上的元素看起来更加生动有趣，可以增加一些交互式的动态变化功能： ```javascript function animate() { requestAnimationFrame(animate); // 更新旋转角度 cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); // 开始循环调用函数模拟连续帧播放过程 ``` 此段程序实现了持续性的自旋动作，使得正方形不断围绕两个轴线做圆周运动，从而增强了视觉体验感。 #### 处理窗口大小调整事件 最后还需要考虑当浏览器尺寸发生变化时重新计算画布比例的问题： ```javascript window.addEventListener('resize', () => { const width = window.innerWidth; const height = window.innerHeight; renderer.setSize(width, height); camera.aspect = width / height; camera.updateProjectionMatrix(); }); ``` 这段附加的功能保证即使是在不同设备上查看也能获得一致的效果显示。