Vue+Three加載glb文件報錯問題及解決

更新時間：2024年10月04日 10:21:04 作者：名字太難隨便取了

當使用Three.js加載GLB模型時,遇到加載錯誤常常是路徑問題,解決方案：1. 將GLB模型文件置于public目錄,避免打包時路徑編碼變化；2. 從node_modules的three庫中復(fù)制draco解碼器至public目錄；3. 確認場景、攝像機和光源設(shè)置正確

報錯

加載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整個文件夾復(fù)制下來

3. 將復(fù)制的draco文件夾復(fù)制到public文件夾內(nèi)

const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/')

5. 大功告成

注意：

請先保證場景攝像機和光源都是正確的
3D/city.glb中的3D是我在public中創(chuàng)建的名為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) // 點光源添加到場景中
      // 環(huán)境光
      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>