threejs如何围绕对象自己的中心旋转,而不是围绕世界中心

Question

场景中的两个对象.立方体旋转轴应该是立方体的中心,这是我的期望.

但鞋模的旋转轴是世界的y轴.

我的原始代码是.

cube.rotation.y += 0.01;
shoe.rotation.y += 0.01;

我在stackoverflow中找到了一个解决方案,如下所示:

cube.rotation.y += 0.01;
var pivot = new THREE.Object3D();
pivot.add(shoe);
pivot.rotation.y += 0.01;

但它不起作用.然后,我改变鞋子的位置.

cube.rotation.y += 0.01;
var pivot = new THREE.Object3D();
shoe.position.set(-5,0,0);
pivot.add(shoe);
pivot.rotation.y += 0.01;

现在结果更好,但仍然不完美.而且由于鞋子的型号很多,我无法确定每种鞋型的不同位置.

Answer 1

如果网格没有围绕其中心旋转,那是因为几何顶点偏离原点.

您可以通过使用边界框来定义合理的中心来自动重新定位,然后像这样偏移网格的位置:

var box = new THREE.Box3().setFromObject( mesh );
box.center( mesh.position ); // this re-sets the mesh position
mesh.position.multiplyScalar( - 1 );

然后将网格添加到数据透视对象:

var pivot = new THREE.Group();
scene.add( pivot );
pivot.add( mesh );

在动画循环中,旋转枢轴;

pivot.rotation.y += 0.01;

编辑:另一种解决方案是转换几何顶点,使几何体以原点为中心或靠近原点:

geometry.translate( distX, distY, distZ );

或者,您也可以致电:

geometry.center();

它根据几何体的边界框为您居中几何体的顶点.

three.js r.97

Answer 2

使用THREE.Geometry.prototype.center如下:

myGeometry.center();

这就像使用带有自动居中(x,y,z)的myGeometery.translate(x,y,z).

Answer 3

枢纽解决方案对我不起作用.

使用OBJLoader.js(用于加载.obj对象),您需要获取对象的boundingBox,获取其中心,将标量乘以-1,并使用它来转换每个子几何的几何.然后,如果要将boundingBox用于某个目的,则需要重新更新boundingBox.

给定OBJ和MTL(纹理)文件的目录和名称(例如,如果OBJ和MTL文件是dir1/myObject.obj和dir1/myObject),这是一个加载obj并"规范化"其几何顶点的函数. .mtl,然后你调用loadObj('dir1','myObject')).

 function loadObj(dir, objName) {
        var onProgress = function(xhr) {
            if (xhr.lengthComputable) {
                var percentComplete = xhr.loaded / xhr.total * 100;
                console.log(Math.round(percentComplete, 2) + '% downloaded');
            }
        };

        var onError = function(xhr) {};

        // Manager
        var manager = new THREE.LoadingManager();
        manager.onProgress = function(item, loaded, total) {
            console.log( 'Started loading file: ' + item + '.\nLoaded ' + loaded + ' of ' + total + ' files.' );
        };

        var mtlLoader = new THREE.MTLLoader();
        mtlLoader.setPath(dir);
        mtlLoader.load(objName + '.mtl', function(materials) {
            materials.preload();

            // Model
            var loader = new THREE.OBJLoader(manager);
            loader.setMaterials(materials);
            loader.setPath(dir);
            loader.load(objName + '.obj', function (object) {

            var objBbox = new THREE.Box3().setFromObject(object);

            // Geometry vertices centering to world axis
            var bboxCenter = objBbox.getCenter().clone();
            bboxCenter.multiplyScalar(-1);

            object.traverse(function (child) {
                if (child instanceof THREE.Mesh) {
                    child.geometry.translate(bboxCenter.x, bboxCenter.y, bboxCenter.z);
                }
            });

            objBbox.setFromObject(object); // Update the bounding box

            scene.add(object);
            }, onProgress, onError);
        });
    }