Question

我一直在努力弄清楚如何在一个场景中锁定两个兄弟网格，这样当我旋转它们时，它们之间的关系保持不变。

我知道这可以使用虚拟Object3D或通过向另一个添加一个对象来完成，但我需要使用Physijs，并且希望两个网格都能够响应场景中的碰撞和其他物理。

这是一个简化的例子，但是我想知道如何让上部球体/圆柱体的行为与下面的代码中的下部对完全相同（下部对具有父/子关系，而上部网格物体）都直接添加到场景中）：

$(document).ready
(
    function()
    {
        var renderer,scene,camera,globe,globe2,disc,disc2,params;

        params = { rotation: {x:0,y:0,z:0}};

        var init = function()
        {
            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
            camera.position.z = 100;
            scene.add(camera);

            renderer = new THREE.WebGLRenderer({antialias:true});
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            // create a mesh with models geometry and material
            globe = new THREE.Mesh(new THREE.SphereGeometry(5, 32, 32), new THREE.MeshNormalMaterial({color: 0xff3300,transparent:false, opacity: 1}));
            THREE.GeometryUtils.center( globe.geometry );
            scene.add(globe);

            disc = new THREE.Mesh(new THREE.CylinderGeometry( 5, 5, 1, 32), new THREE.MeshNormalMaterial());
            disc.position.y = 5;
            scene.add(disc);

            globe2 = new THREE.Mesh(new THREE.SphereGeometry(5, 32, 32), new THREE.MeshNormalMaterial({color: 0xff3300,transparent:false, opacity: 1}));
            THREE.GeometryUtils.center( globe2.geometry );
            globe2.position.y = -20;
            scene.add(globe2);

            disc2 = new THREE.Mesh(new THREE.CylinderGeometry( 5, 5, 1, 32), new THREE.MeshNormalMaterial());
            disc2.position.y = 5;
            globe2.add(disc2);

            controls = new dat.GUI();
            controls.add( params.rotation, 'x', -180, 180 );
            controls.add( params.rotation, 'y', -180, 180 );
            controls.add( params.rotation, 'z', -180, 180 );
            //controls.close();
        }

        var rotateAroundWorldAxis = function( object, axis, radians ) 
        { 
            rotWorldMatrix = new THREE.Matrix4();
            rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
            rotWorldMatrix.multiplySelf(object.matrix);
            object.matrix = rotWorldMatrix;
            object.rotation.setEulerFromRotationMatrix(object.matrix, object.order);
        }

        var animate = function()
        {
            requestAnimationFrame(render);
            render();
        }

        var render = function()
        {
            requestAnimationFrame(render);

            globe.rotation.set( params.rotation.x*Math.PI/180,params.rotation.y*Math.PI/180,params.rotation.z*Math.PI/180)
                disc.rotation.copy(globe.rotation);

            globe2.rotation.set( params.rotation.x*Math.PI/180,params.rotation.y*Math.PI/180,params.rotation.z*Math.PI/180)

            renderer.render(scene,camera);
        }

        init();
        animate();
    }
);

这里小提琴： http://jsfiddle.net/lostnation/9pd0kpwo/30/

Answer 1

不幸的是，当向场景添加复合网格（父/子关系网格）时，它们的子节点已完成，并且在（Physijs）之后无法更改。这肯定必须是三个相同的东西。

你知道Physijs __dirtyRotation吗？在更改任何实际的Physijs网格旋转之前，必须将此标志设置为true。使用相同的算法，您可以执行与仅使用THREE相同的操作。只需确保形状不相互添加。

锁定多个Three.js网格相对于彼此

1 个答案: