将多个Three.js网格相互锁定

我一直在努力研究如何锁定场景中的两个兄弟网格，以便在旋转它们时，它们之间的关系保持不变。将多个Three.js网格相互锁定

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

来源

2014-11-24 Noah Pedrini

不幸的是，添加复合网格（父/子关系网格）的场景时，他们的孩子得以确定并可以” （Physijs）后改变。这在三中肯定是一样的。您是否知道Physijs __dirtyRotation？您必须将此标志设置为true，然后才能更改任何实际的Physijs网格旋转。使用相同的算法，你可以做同样的事情，就好像你只使用THREE一样。只要确保形状是而不是彼此相加。

来源

2015-11-17 12:46:52 XavCo7

将多个Three.js网格相互锁定

回答

相关问题