將多個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網格相互鎖定

回答

相關問題