最近有个新想法,要在网页上展示3D重建的模型(obj + mtl 格式),并且可以拖拽缩放。
实施过程中发现模型的中心点是偏离到模型外部的,经过查阅Three.js资料发现两个关键函数
因此把导入obj + mtl的函数修改如下
- 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);
});