three.js:平滑地旋转与OrbitControls camera.rotation.y相反的对象

时间:2015-08-18 21:48:43

标签: javascript canvas 3d three.js

使用OrbitControls旋转three.js中的场景,我希望planeMesh对象始终面向相机。我正在尝试以下但它只是像疯了一样旋转(并且似乎是处理器密集型),但当我用鼠标围绕场景(移动相机)时,它看起来像是试图保持正面。我试图让它只在相机移动时缓慢重新定向。我在这里做错了什么?

Here's a plunker

以下是相关的JS:

function animate() {
   requestAnimationFrame( animate );

   planeMesh.rotation.y -= Math.PI /camera.rotation.y;

   render();
}

我也试过以下(也没用):

   function animate() {
     requestAnimationFrame( animate );
     var a = camera.rotation.y; 
     var b = camera.rotation.y; 

     if (a == b) {
       planeMesh.rotation.y -= Math.PI /camera.rotation.y;
       } else {    
     }

     render();
     a = camera.rotation.y; 
}

**编辑 我希望cameraplaneMesh保持当前的关系。 以下是起始轮换: planeMesh Rotation y = 3.141592653589793 camera Rotation y = -0.06894749489830237

但是,我认为相机正在使用THREE.Euler,而planeMesh正在使用Math.PI进行旋转,所以...是使用不同系统进行的这两次旋转测量吗?

当然,如果我能得到起点的差异,然后只有当差异更大时改变planeMesh rotation.y,但是差异大于起始差异,那么我将完成我的目标。但是我该怎么做?我是否必须以某种方式翻译这两种测量系统?当我旋转场景时,相机确实使用了不同的测量比例。

1 个答案:

答案 0 :(得分:2)

确保飞机始终面向摄像机的最简单方法是将其简单地连接到摄像机而不是场景,例如camera.add(planeMesh);并将飞机相对于相机定位。然后他们的旋转将始终自然对齐。

或者,如果两者都是同一父母的孩子(通常是场景),请使用planeMesh.lookAt(camera.position);