javascript - THREE.js - 相对于具有旋转/缩放父项的屏幕移动对象

Question

在 THREE.js 中，我试图根据鼠标位置在屏幕上四处移动对象。看了一些examples ，这似乎很困难。这是我从其中一个示例中借用的一些代码，这些代码主要用于满足我的需要:

function mouseMove(e){
    mouse2D.x = ( (e.pageX-canvas.offsetParent.offsetLeft) / canvas.clientWidth ) * 2 - 1;
    mouse2D.y = - ( (e.pageY-canvas.offsetParent.offsetTop) / canvas.clientHeight ) * 2 + 1;

    if (selected) {
      var ray = projector.pickingRay(mouse2D, PGL._camera).ray;
      var targetPos = ray.direction.clone().addSelf(ray.origin);
      targetPos.subSelf(_offset);

      obj.position.x = initPos.x + targetPos.x;
      obj.position.y = initPos.y + targetPos.y;
    }
  }

这适用于在场景中移动直接子级。问题是试图移动具有旋转和/或缩放的父项的对象。你会如何处理？可以将对象 matrixRotationWorld 应用于运动吗？我仍在努力解决这个问题。任何帮助表示赞赏。

Answer 1

查看这些示例，它们可以帮助您:

http://mrdoob.github.com/three.js/examples/misc_controls_fly.html

或

http://mrdoob.github.com/three.js/examples/webgl_interactive_voxelpainter.html