在Three.js中重新設定3D模型的中心點
阿新 • • 發佈:2019-02-14
最近有個新想法,要在網頁上展示3D重建的模型(obj + mtl 格式),並且可以拖拽縮放。
實施過程中發現模型的中心點是偏離到模型外部的,經過查閱Three.js資料發現兩個關鍵函式
- geometry.computeBoundingBox();
- geometry.center()
var mtlLoader = new THREE.MTLLoader(); mtlLoader.setPath('obj/shigandang/'); mtlLoader.load('shigandang.mtl', function (materials) { materials.preload(); var objLoader = new THREE.OBJLoader(); objLoader.setMaterials(materials); //objLoader.setPath('obj/male02/'); objLoader.setPath('obj/shigandang/'); //objLoader.load('male02.obj', function (object) { objLoader.load('shigandang.obj', function (object) { // object.scale.set(0.1, 0.1, 0.1); console.log(object); object.children[0].geometry.computeBoundingBox(); object.rotation.x = THREE.Math.degToRad( 90 ); console.log(- ( object.children[0].geometry.boundingBox.max.x + object.children[0].geometry.boundingBox.min.x ) / 2); console.log(- ( object.children[0].geometry.boundingBox.max.y + object.children[0].geometry.boundingBox.min.y ) / 2); console.log(- ( object.children[0].geometry.boundingBox.max.z + object.children[0].geometry.boundingBox.min.z ) / 2); console.log( object.children[0].geometry.center() );
object.children[0].geometry.center()
helper = new THREE.BoundingBoxHelper(object, 0xff0000);
helper.update();
scene.add(helper);
scene.add(object);
}, onProgress, onError);
});