Three.js Physijs将网格移向鼠标?

时间:2014-11-16 20:19:43

标签: javascript three.js physijs

所以我一直在筛选这里的帖子和文档,试图弄清楚如何让BoxMesh基本上跟随鼠标。最终我会做操纵杆触摸控制,类似于英雄的战利品,或其他使用触控操纵杆的游戏。但是现在我想确保我可以正常工作速度。

所以我的鼠标按下事件就是这样:

if (scene.mouseControls.isDown) {
  var coords = scene.mouseControls.screenCoords;
  var vector = new THREE.Vector3();

  vector.set(
    ( scene.mouseControls.screenCoords.x / window.innerWidth ) * 2 - 1,
    0.5,
    - ( scene.mouseControls.screenCoords.y / window.innerHeight ) * 2 + 1
  );
  vector.unproject(scene.camera);

  var p1 = this.mesh.position;
  var p2 = vector;
  var angle = Math.atan2(p2.x - p1.x, p2.z - p1.z);
  var velX = Math.sin(angle) * 20;
  var velZ = Math.cos(angle) * 20;

  console.log(vector.x, vector.z);

  this.mesh.setLinearVelocity(new THREE.Vector3(velX, 0, velZ));
}
else {
  this.mesh.setLinearVelocity(notMovingVector);
}

虽然确定的速度似乎来回翻转,但玩家非常非常紧张。

以下是我如何设置鼠标坐标:

window.addEventListener(activeEventList[POINTER_MOVE], function (e) {
  if (e.touches) {
    var t = e.touches[0];
    _this.screenCoords.x = t.clientX;
    _this.screenCoords.y = t.clientY;
  }
  else {
    _this.screenCoords.x = e.clientX;
    _this.screenCoords.y = e.clientY;
  }
});

不使用滚动偏移或任何内容,因为场景是全屏的。

修改

删除了上一个方向代码。使用atan2计算角度,然后应用它。与我在2d游戏中如何做到这一点类似。

1 个答案:

答案 0 :(得分:0)

管理以解决这个问题。我使用atan2的改变是朝着正确方向迈出的一步,但它需要乘以多次回归。问题是我正在使用相机X& Y值计算距离。但在视觉上,它的X& Y覆盖的空间比飞机上的空间大。

所以这就是我所做的:

if (scene.mouseControls.isDown) {
  var coords = scene.mouseControls.screenCoords;
  var vector = new THREE.Vector3();

  vector.set(
    ( scene.mouseControls.screenCoords.x / window.innerWidth ) * 2 - 1,
    - ( scene.mouseControls.screenCoords.y / window.innerHeight ) * 2 + 1,
    0.5
  );
  vector.unproject(scene.camera);

  var dir = vector.sub(scene.camera.position).normalize();
  var distance = - scene.camera.position.y / dir.y;

  var p1 = this.mesh.position;
  var p2 = scene.camera.position.clone().add(dir.multiplyScalar(distance));

  var angle = Math.atan2(p2.z - p1.z, p2.x - p1.x);
  var velX = Math.cos(angle) * 20;
  var velZ = Math.sin(angle) * 20;

  this.mesh.setLinearVelocity(new THREE.Vector3(velX, 0, velZ));
}