vue項目中加載模型報錯

 

模型要放到public目錄下，可以新建一個文件夾models放各種模型，引入的時候

loader.load('models/changfang.obj', function (object) {})

完整示例：

<template>
  <div id="loaderModel">
  </div>
</template>

<script>
import * as THREE from 'three'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
// import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      material: null,
      el: null,
      control: null,
      textureImgSrc: require('../../assets/images/UV_Grid_Sm.jpg')
    }
  },
  mounted () {
    this.init()
    this.animate()
  },
  methods: {
    init () {
      this.el = document.getElementById( 'loaderModel' )
      this.initRenderer()
      this.initScene()
      this.initCamera()
      this.initLight()
      this.initModel()
      this.initControl()
      window.addEventListener( 'resize', this.onWindowResize, false )
    },
    /**
     * @description 初始化渲染場景
     */
    initRenderer () {
      this.renderer = new THREE.WebGLRenderer()
      this.renderer.setPixelRatio(window.devicePixelRatio)
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      this.renderer.shadowMap.enabled = true;
      // 默認的是，沒有設置的這個清晰 THREE.PCFShadowMap
      this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
      this.el.appendChild(this.renderer.domElement)
    },
    initControl () {
      this.control = new OrbitControls(this.camera, this.renderer.domElement)
    },
    initLight () {
      let ambientLight = new THREE.AmbientLight("#ffffff")
      this.scene.add(ambientLight)
    },
    /**
     * @description 初始化相機
     */
    initCamera () {
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      this.camera.position.set(200, 50, 250);
      this.camera.lookAt(new THREE.Vector3(0, 0, 0));
      this.scene.add( this.camera )
    },
    /**
     * @description 初始化場景
     */
    initScene () {
      this.scene = new THREE.Scene()
    },
    initModel () {
      // texture
      let manager = new THREE.LoadingManager()
		manager.onProgress = function ( item, loaded, total ) {
		  console.log( item, loaded, total )
		}
      let textureLoader = new THREE.TextureLoader( manager )
      let texture = textureLoader.load( this.textureImgSrc )
      // model
      let onProgress = function ( xhr ) {
		if ( xhr.lengthComputable ) {
		  let percentComplete = xhr.loaded / xhr.total * 100
		  console.log( Math.round(percentComplete, 2) + '% downloaded' )
		}
      }

      let onError = function ( xhr ) {
        console.log(xhr)
      }

      let self = this
      //創建fbx加載器
      var loader = new OBJLoader();
      loader.load('models/changfang.obj', function (object) {
        object.scale.set(0.001, 0.001, 0.001);
        let box = new THREE.Box3().setFromObject( object );
        let size = box.size();
        console.log(size)
        object.traverse( function ( child ) {
          let material = new THREE.MeshPhongMaterial({
            // color:0xff0000,
            specular:0x4488ee,
            shininess:12,
            opacity: 0.5,
            transparent:true,
            map:texture
          })
          child.material = material
          if ( child.isMesh ) {
            child.castShadow = true
            child.receiveShadow = true
          }
        })
        self.scene.add(object);
      }, onProgress, onError)
    },
    animate () {
      this.render()
      requestAnimationFrame( this.animate )
    },
    render () {
      this.control.update();
      this.renderer.render(this.scene, this.camera);
    },
    onWindowResize () {
      this.camera.aspect = window.innerWidth / window.innerHeight
      this.camera.updateProjectionMatrix()
      this.renderer.setSize( window.innerWidth, window.innerHeight )
    }
  }
}
</script>

<style lang="scss" scoped>
#loaderModel {
  font-family: Monospace;
  background-color: #000;
  color: #fff;
  margin: 0px;
  overflow: hidden;
}
</style>
<style>
body {
  margin: 0;
  overflow: hidden;
  /* 隱藏body窗口區域滾動條 */
}
</style>