### Vue3 中使用 Three
.js 和 DRACOLoader
加载 GLTF 模型
在 Vue3 项目中集成 Three
.js 并通过 `DRACOLoader` 来优化
加载 `
.gltf` 或 `
.glb` 文件的过程可以显著减少文件大小并提升性能。以下是具体
方法：
#### 配置环境
为了支持 Draco
压缩格式，需要引入 `THREE
.DRACOLoader` 并将其绑定到 `
GLTFLoader` 的解码器属性上。
```javascript
// 安装依赖库
npm install three @types/three draco3d
```
#### 实现代码示例
以下是一个完整的实现案例，展示了如何在 Vue3 组件中配置和
加载带有 Draco
压缩的
GLTF 模型：
```javascript
<template>
<div ref="container"></div>
</template>
<script setup>
import * as THREE from 'three';
import { onMounted, ref } from 'vue';
import { OrbitControls } from 'three/examples/
jsm/controls/OrbitControls';
import {
GLTFLoader } from 'three/examples/
jsm/loaders/
GLTFLoader';
import { DRACOLoader } from 'three/examples/
jsm/loaders/DRACOLoader';
const container = ref(null);
onMounted(() => {
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
.AmbientLight(0xffffff, 1); // soft white light
scene
.add(light);
// 初始化 DRACO 解压工具
const dracoLoader = new DRACOLoader();
dracoLoader
.setDecoderPath('https://www
.gstatic
.com/draco/versioned/decoders/1
.5
.6/');
// 将 DRACO Loader 注入到
GLTFLoader 中
const loader = new
GLTFLoader()
.setDRACOLoader(dracoLoader);
//
加载模型
loader
.load(
'/path/to/model
.glb', // 替换为实际
模型路径
(
gltf) => {
console
.log(
gltf);
scene
.add(
gltf.scene);
},
undefined,
(error) => {
console
.error(error);
}
);
// 添加轨道控制功能
const controls = new OrbitControls(camera, renderer
.domElement);
camera
.position
.z = 5;
function animate() {
requestAnimationFrame(animate);
renderer
.render(scene, camera);
}
animate();
});
</script>
<style scoped>
div {
width: 100%;
height: 100vh;
}
</style>
```
上述代码实现了以下几个核心部分：
- **场景初始化**：创建了一个基本的 Three
.js 场景、相机以及渲染器。
- **光照设置**：添加了全局环境光来照亮
模型[^2]。
- **DracoLoader 集成**：通过指定 Google 提供的在线解码器路径完成
压缩数据的解析[^4]。
- **错误处理机制**：当
模型加载失败时会打印日志以便调试[^3]。
#### 关键点说明
1
. **Draco 路径配置**
- 如果本地部署无法访问网络资源，则需下载对应版本的 decoder 文件至服务器端，并调整 `dracoLoader
.setDecoderPath()`
方法中的 URL 参数指向这些静态资源位置[^1]。
2
. **跨域问题**
- 当尝试从远程地址
加载带 Draco 编码的资产时可能会遇到 CORS 错误。此时应确认目标站点已启用适当的安全策略或者考虑将素材托管在同一域名下以规避此限制。
3
. **动画支持**
- 对于包含骨骼动画或其他复杂效果的
模型，在成功导入之后可以通过遍历其内部结构找到相关组件进而激活它们的功能。
---
###
本文介绍如何使用ThreeJS在React环境中加载压缩过的.gltf模型，包括必要的组件安装、加载器设置及解压缩代码配置。
扫一扫
423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
