获取 A 帧中实体的方向向量

Question

我的 A-Frame 场景中有一个盒子，我想用键盘控制它。我想要W、S和箭头Up/Down控制前后移动，我想要A、D和箭头Left/Right向左或向右旋转方块。

我已经设法让盒子前后移动并旋转。问题是，当盒子旋转时，我希望能够按 forward/backward 键将它移动到新的方向，但现在它仍然在原来的方向上前后移动。

HTML

 <a-entity id="rover" geometry="primitive: box" material="color: yellow" position="0 1 -3">

JS:

var up = false,
    right = false,
    down = false,
    left = false;

document.addEventListener('keydown',press)
function press(e){
  if (e.keyCode === 38 /* up */ || e.keyCode === 87 /* w */ || e.keyCode === 90 /* z */){
    up = true
  }
  if (e.keyCode === 39 /* right */ || e.keyCode === 68 /* d */){
    right = true
  }
  if (e.keyCode === 40 /* down */ || e.keyCode === 83 /* s */){
    down = true
  }
  if (e.keyCode === 37 /* left */ || e.keyCode === 65 /* a */ || e.keyCode === 81 /* q */){
    left = true
  }
}


document.addEventListener('keyup',release)
function release(e){
  if (e.keyCode === 38 /* up */ || e.keyCode === 87 /* w */ || e.keyCode === 90 /* z */){
    up = false
  }
  if (e.keyCode === 39 /* right */ || e.keyCode === 68 /* d */){
    right = false
  }
  if (e.keyCode === 40 /* down */ || e.keyCode === 83 /* s */){
    down = false
  }
  if (e.keyCode === 37 /* left */ || e.keyCode === 65 /* a */ || e.keyCode === 81 /* q */){
    left = false
  }
}


function gameLoop(){
  var rover = document.getElementById('rover');
    var currentPosition = rover.getAttribute('position');
    var currentRotation = rover.getAttribute('rotation');


    var direction = new THREE.Vector3(0, currentRotation.y, currentPosition.z);


  if (up){
  rover.setAttribute("position", {x: 0, y: 1, z: (currentPosition.z - 0.1)});
  }
  if(down){
       rover.setAttribute("position", {x: 0, y: 1, z: (currentPosition.z + 0.1)});
  }
  if(left){
       rover.setAttribute("rotation", {x: 0, y: (currentRotation.y + 1), z: 0});
  }
  if(right){
      rover.setAttribute("rotation", {x: 0, y: (currentRotation.y - 1), z:  0});
  }



requestAnimationFrame(gameLoop)
}
 requestAnimationFrame(gameLoop)

我正在尝试获取一个方向向量并以某种方式使用它，但我现在完全卡住了。

Answer 1

基本问题是您要设置对象在世界 space 中的位置，而不是沿着它自己的对象 space 坐标移动它。

有几种方法可以解决此问题，最直接的方法是使用 Object3D 的 translate 方法，该方法沿其标准化轴移动对象。不要设置属性，而是尝试调用

rover.translateZ(# of units)

等等另见：

How to move an object forward in Three.js?

获取 A 帧中实体的方向向量

Get Direction Vector for entity in A-Frame

javascript

3d

direction

web

aframe