### 三级标题：
Vue.js 项目中使用
Three.js 加载和渲染
外部 3D
模型
在
Vue.js 项目中集成
Three.js 并加载
外部 3D
模型，可以通过以下方式实现。首先确保已经安装了 `
three` 及其相关的依赖项，并且将
模型文件放置在合适的目录中以供访问。
#### 安装依赖
在开始之前，需要通过 npm 或 yarn 安装 `
three` 库以及用于加载特定格式
模型的加载器。例如：
```bash
npm install
three
npm install
three/examples/
jsm/loaders/GLTFLoader
```
#### 创建
Three.js 场景
在
Vue 组件中创建一个基本的
Three.js 场景，包括相机、渲染器和场景对象。同时，设置好用于显示 3D 内容的 DOM 容器。
```
vue
<template>
<div ref="container" class="scene-container"></div>
</template>
<script>
import * as
THREE from '
three';
import { GLTFLoader } from '
three/examples/
jsm/loaders/GLTFLoader';
export default {
mounted() {
this
.init
Three();
},
methods: {
init
Three() {
const scene = new
THREE.Scene();
const camera = new
THREE.PerspectiveCamera(75, window
.innerWidth / window
.innerHeight, 0
.1, 1000);
const renderer = new
THREE.WebGLRenderer({ antialias: true });
renderer
.setSize(window
.innerWidth, window
.innerHeight);
this
.$refs
.container
.appendChild(renderer
.domElement);
// 添加光源
const light = new
THREE.AmbientLight(0xffffff, 1);
scene
.add(light);
// 设置相机位置
camera
.position
.z = 5;
// 加载
模型
const loader = new GLTFLoader();
loader
.load('/models/scene
.gltf', (gltf) => {
scene
.add(gltf
.scene);
animate();
}, undefined, (error) => {
console
.error('An error happened while loading the model:', error);
});
// 渲染循环
function animate() {
requestAnimationFrame(animate);
renderer
.render(scene, camera);
}
}
}
}
</script>
<style scoped>
.scene-container {
width: 100%;
height: 100vh;
}
</style>
```
#### 放置
模型文件
为了确保
模型能够被正确加载，应将
模型文件（如 `
.gltf` 文件）放置在
项目的 `public` 目录下对应的子目录中，比如 `public/models/`。这样，在构建时这些文件会被直接复制到输出目录，并可通过根路径 `/models/scene
.gltf` 访问[^1]。
#### 加载不同类型的
模型
Three.js 提供了多种加载器来支持不同的 3D
模型格式，包括但不限于：
- **GLTF** 格式使用 `GLTFLoader`
- **OBJ** 格式使用 `OBJLoader`
- **STL** 格式使用 `STLLoader`
每种加载器的使用方法大致相同，主要区别在于导入的模块名称和实例化的方式。根据实际需求选择正确的加载器，并调整相应的路径配置即可。
#### 额外注意事项
对于某些特殊格式的文件，如 `
.pcd` 点云数据文件，则可能需要额外的解析库或自定义解析逻辑，因为
Three.js 原生并不直接支持这类文件的加载。在这种情况下，可以考虑
引入第三方库或者自行编写解析代码来处理此类文件[^3]。
---
博客作者在开发过程中遇到模型加载失败的问题，原因是模型文件放置位置不正确。解决方法是将模型文件放入public目录下，并确保引用路径无误。通过console.log确认模型已成功解析。
扫一扫
1923
到【灌水乐园】发言
