vue加載three模型成功,但顯示黑屏?

遇到問題解決方案:

遇到問題:導入到場景內的模型無法查看,而且也沒有報錯

這種會有可能有多種情況造成的,一般情況下都是下面兩種情況造成的:

1.模型太小或者太大,這種情況可以嘗試放大一千倍或者縮小一千倍來查看效果。

2. 模型的位置太偏,根本不在相機照射範圍內,這種問題我們可以將模型居中到相機照射的焦點位置看

獲取模型的大小:

// 獲取模型大小
  let box = new THREE.Box3().setFromObject( object );
  let size = box.size();

根據實際情況進行縮放(放大或者縮小)

// 模型縮放
  object.scale.set(0.0001, 0.0001, 0.0001);

再不行就再調整相機角度。

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)
  }

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章