1. 程式人生 > >在Three.js中重新設定3D模型的中心點

在Three.js中重新設定3D模型的中心點

最近有個新想法,要在網頁上展示3D重建的模型(obj + mtl 格式),並且可以拖拽縮放。

實施過程中發現模型的中心點是偏離到模型外部的,經過查閱Three.js資料發現兩個關鍵函式

  1. geometry.computeBoundingBox();
  2. geometry.center()
因此把匯入obj + mtl的函式修改如下
 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);
        });