0

シーン内の 2 つの兄弟メッシュをロックする方法を見つけるのに苦労しており、それらを回転させたときに相互の関係が固定されたままになります。

ダミーの Object3D を使用するか、1 つのオブジェクトを別のオブジェクトに追加することでこれを実行できることはわかっていますが、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)。これはきっとTHREEでも同じこと。

Physijsについて知っています__dirtyRotationか？true実際の Physijs メッシュの回転を変更する前に、このフラグを に設定する必要があります。同じアルゴリズムを使用して、THREE のみを使用しているかのように同じことを行うことができます。形状が互いに追加されていないことを確認してください。

于 2015-11-17T12:46:52.113 に答える