0

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

我知道这可以使用虚拟 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/

4

1 回答 1

0

不幸的是，当将复合网格（父/子关系网格）添加到场景中时，它们的子对象已最终确定，并且在 (Physijs) 之后无法更改。这肯定是三部曲中的同一件事。

你知道 Physijs__dirtyRotation吗？您必须先将此标志设置为，true然后才能更改任何实际的 Physijs 网格旋转。使用相同的算法，你可以做同样的事情，就好像你只使用三个一样。只要确保形状没有相互添加。

于 2015-11-17T12:46:52.113 回答