遇到問題解決方案:
遇到問題:導入到場景內的模型無法查看,而且也沒有報錯
這種會有可能有多種情況造成的,一般情況下都是下面兩種情況造成的:
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)
}