Vue+Three加载glb文件报错问题及解决
作者：名字太难随便取了
当使用Three.js加载GLB模型时,遇到加载错误常常是路径问题,解决方案：1. 将GLB模型文件置于public目录,避免打包时路径编码变化；2. 从node_modules的three库中复制draco解码器至public目录；3. 确认场景、摄像机和光源设置正确
报错
加载glb的代码
load3D() {
const loader = new GLTFLoader()
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/')
dracoLoader.preload()
loader.setDRACOLoader(dracoLoader)
loader.load('/3D/city.glb', (gltf) => {
this.scene.add(gltf.scene)
this.renderer.render(this.scene, this.camera)
}, (xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
}, (error) => {
console.error(error)
})
}解决方式
1. glb模型文件请放到public文件下，否则会无法查找到（打包后其他文件都会加上一串编码）
2. 前往node_modules文件下 找到three文件夹， 找到/examples/js/libs/draco/ 将draco整个文件夹复制下来
3. 将复制的draco文件夹复制到public文件夹内
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/')5. 大功告成
注意：
- 请先保证场景摄像机和光源都是正确的
- 3D/city.glb中的3D是我在public中创建的名为3D的文件夹
完整代码
<template>
<section>
<section id="container"></section>
</section>
</template>
<script>
import * as Three from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
export default {
name: 'Index',
data() {
return {
camera: null,
scene: null,
renderer: null,
mesh: null
}
},
mounted() {
this.init()
this.animate()
},
methods: {
init() {
const container = document.getElementById('container')
this.camera = new Three.PerspectiveCamera(90, container.clientWidth / container.clientHeight, 0.1, 10000)
this.renderer = new Three.WebGLRenderer({ antialias: true })
this.camera.position.set(200, 200, 400)
this.scene = new Three.Scene()
this.renderer.setClearColor(new Three.Color(0xF7F2F1))
this.renderer.setSize(container.clientWidth, container.clientHeight)
this.renderer.shadowMap.enabled = true
container.appendChild(this.renderer.domElement)
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
this.controls.target = new Three.Vector3(0, 0, 0)
this.loadLight()
this.load3D()
},
load3D() {
const loader = new GLTFLoader()
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/')
dracoLoader.preload()
loader.setDRACOLoader(dracoLoader)
loader.load('/3D/city.glb', (gltf) => {
this.scene.add(gltf.scene)
this.renderer.render(this.scene, this.camera)
}, (xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
}, (error) => {
console.error(error)
})
},
loadLight() {
// 点光源
// const point = new Three.PointLight(0xffffff)
// point.position.set(4000, 4000, 4000) // 点光源位置
// this.scene.add(point) // 点光源添加到场景中
// 环境光
const ambient = new Three.AmbientLight(0xFFFFFF)
this.scene.add(ambient)
},
animate() {
requestAnimationFrame(this.animate)
this.renderer.render(this.scene, this.camera)
}
}
}
</script>
<style scoped>
#container {
width: 100%;
height: calc(100vh - 84px);
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。