vue3 three.js gltf typescript

### 使用Three.js加载GLTF模型到Vue3中的TypeScript实现 在Vue3项目中集成Three.js并加载GLTF模型时，可以利用`three`库以及其官方推荐的`GLTFLoader`来完成这一操作。以下是具体的实现方式： #### 安装依赖项 首先需要安装必要的npm包： ```bash npm install three @types/three vue-three-fiber ``` 其中，`vue-three-fiber`是一个用于简化Vue与Three.js交互的工具。 #### 创建组件结构 创建一个新的Vue组件文件（例如 `GltfModel.vue`），并在该文件中引入所需的模块。 ```typescript <script lang="ts"> import { defineComponent, onMounted } from 'vue'; import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; export default defineComponent({ name: 'GltfModel', props: { modelPath: { type: String, required: true, }, }, setup(props) { let scene: THREE.Scene; let camera: THREE.PerspectiveCamera; let renderer: THREE.WebGLRenderer; const initScene = () => { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 将渲染器附加到DOM树上[^2] const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(10, 10, 10).normalize(); // 添加光源以便更好地观察模型 scene.add(light); }; const loadModel = async () => { const loader = new GLTFLoader(); try { await loader.load( props.modelPath, (gltf) => { scene.add(gltf.scene); // 加载成功后将场景添加至全局scene对象 }, undefined, (error) => console.error('Error loading the model:', error.message)[^3] ); } catch (e) { console.error(e); } }; const renderLoop = () => { requestAnimationFrame(renderLoop); renderer.render(scene, camera); }; onMounted(() => { initScene(); loadModel().then(() => renderLoop()); }); return {}; }, }); </script> <template> <div></div> <!-- 渲染区域 --> </template> <style scoped> /* 可选样式 */ </style> ``` #### 关键点解析 1. **初始化场景** 场景、相机和渲染器是Three.js的核心组成部分。通过设置这些参数，能够定义视图范围和投影模式[^4]。 2. **加载GLTF模型** 利用`GLTFLoader`类可以从指定路径加载`.glb`或`.gltf`格式的三维模型。如果发生错误，则会触发回调函数捕获异常[^5]。 3. **动画循环** 调用`requestAnimationFrame`方法不断更新帧率，并调用渲染器重新绘制整个画面。 #### 常见问题及其解决方案 - 如果遇到“无法找到名称‘THREE’”的问题，请确认已正确安装`@types/three`类型声明文件。 - 当尝试运行应用时报错提示缺少某些扩展插件时，可能是因为未导入对应的JSM脚本所致。确保按照上述代码片段完整复制粘贴相关内容即可解决问题[^6]。