vue3 three.js加载3d模型glb/gltf

### Vue3 中使用 Three.js 加载 GLB/GTFL 格式的 3D 模型 以下是基于 Vue3 和 Three.js 的实现方式，展示了如何加载和显示 GLB 或 GTLF 格式的 3D 模型。 #### 安装依赖 首先需要安装 `three` 库以及其附加模块： ```bash npm install three @types/three ``` #### 示例代码 以下是一个完整的示例代码片段： ```javascript <template> <div ref="container"></div> </template> <script setup> import { onMounted, ref } from 'vue'; import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; // 导入轨道控制器 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // 导入GLTF加载器 const container = ref(null); onMounted(() => { if (!container.value) return; // 场景初始化 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); container.value.appendChild(renderer.domElement); // 添加光源 const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(10, 10, 10).normalize(); scene.add(light); // 创建轨道控制器 const controls = new OrbitControls(camera, renderer.domElement); controls.enableZoom = true; controls.update(); // 使用GLTFLoader加载模型 const loader = new GLTFLoader(); loader.load('/path/to/model.glb', (gltf) => { console.log('Model loaded:', gltf); // 输出日志以便调试[^2] scene.add(gltf.scene); }, undefined, (error) => { console.error('An error occurred while loading the model:', error); // 错误处理 }); // 设置相机位置 camera.position.z = 5; // 渲染循环 const animate = () => { requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); // 响应窗口大小变化 window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); }); </script> <style scoped> #app { width: 100%; height: 100vh; } </style> ``` --- #### 关键点说明 1. **场景设置** - 使用 `THREE.Scene()` 创建一个三维场景。 - 配置透视摄像机 `THREE.PerspectiveCamera` 并调整视场角度、宽高比例等参数[^3]。 2. **光照配置** - 添加方向光 `DirectionalLight` 提供基本照明效果，增强模型可见度[^3]。 3. **模型加载** - 利用 `GLTFLoader` 实现 GLB/GTFL 文件的异步加载，并将其添加到场景中[^2]。 4. **轨道控制** - 引入 `OrbitControls` 插件支持鼠标拖拽旋转视角功能。 5. **响应式设计** - 处理浏览器窗口尺寸变更事件，动态更新渲染区域大小与投影矩阵[^3]。 --- #### 注意事项 - 替换 `/path/to/model.glb` 为实际模型资源路径。 - 如果遇到跨域问题，请确认服务器已启用 CORS 支持[^1]。 ---