在 Vue 3 + Vite + JavaScript 环境下使用 three.js

在 Vue 3 + Vite + JavaScript 环境下使用 three.js 需要注意的基本要点，重点围绕相机、光源、场景、材质和模型展开：

1. 相机（Camera）

相机决定了场景的渲染视角。常用的是透视相机PerspectiveCamera：

import { PerspectiveCamera } from 'three'; const camera = new PerspectiveCamera( 75, // 视角 window.innerWidth / window.innerHeight, // 宽高比 0.1, // 近裁剪面 1000 // 远裁剪面 ); camera.position.set(0, 5, 10); // 设置相机位置

2. 光源（Light）

光源影响场景的明暗和阴影效果。常用光源类型：

import { DirectionalLight, AmbientLight } from 'three'; // 定向光（模拟太阳光） const directionalLight = new DirectionalLight(0xffffff, 1); directionalLight.position.set(5, 10, 7); // 环境光（均匀照亮所有物体） const ambientLight = new AmbientLight(0x404040);

3. 场景（Scene）

场景是3D对象的容器：

import { Scene } from 'three'; const scene = new Scene(); scene.add(camera, directionalLight, ambientLight); // 添加相机和光源

4. 材质（Material）

材质定义物体表面属性：

import { MeshStandardMaterial, MeshBasicMaterial } from 'three'; // 标准材质（支持光照） const material = new MeshStandardMaterial({ color: 0x3498db, roughness: 0.2, }); // 基础材质（无视光照） const basicMaterial = new MeshBasicMaterial({ color: 0xe74c3c });

5. 模型（Model）

模型由几何体（Geometry）和材质（Material）组成：

import { Mesh, BoxGeometry } from 'three'; const geometry = new BoxGeometry(1, 1, 1); const cube = new Mesh(geometry, material); scene.add(cube); // 添加到场景

加载外部模型

使用GLTFLoader加载.glb或.gltf模型：

import { GLTFLoader } from 'three/addons/GLTFLoader.js'; const loader = new GLTFLoader(); loader.load('model.glb', (gltf) => { scene.add(gltf.scene); });

完整示例（Vue 3 组件）

<script setup> import * as THREE from 'three'; import { OrbitControls } from 'three/addons/OrbitControls.js'; import { GLTFLoader } from 'three/addons/GLTFLoader.js'; import { onMounted, ref } from 'vue'; const canvasRef = ref(null); onMounted(() => { // 初始化场景 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value }); // 添加光源 const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(0, 10, 10); scene.add(light); // 添加立方体 const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); // 加载外部模型 const loader = new GLTFLoader(); loader.load('robot.glb', (gltf) => { scene.add(gltf.scene); }); // 渲染循环 const animate = () => { requestAnimationFrame(animate); cube.rotation.x += 0.01; renderer.render(scene, camera); }; animate(); }); </script> <template> <canvas ref="canvasRef" width="800" height="600"></canvas> </template>

关键注意事项

1. Vite 插件支持
   安装vite-plugin-three或配置vite.config.js处理 three.js 模块：

   npm install three @tresjs/vite-plugin

2. 资源销毁
   在组件卸载时释放资源：

   onUnmounted(() => { renderer.dispose(); geometry.dispose(); material.dispose(); });

3. 响应式适配
   监听窗口变化更新相机和渲染器：

   window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });

通过以上结构化的实现，可在 Vue 3 项目中高效集成 three.js 的 3D 渲染能力。