2017-09-26 166 views
0

我在我的A-Frame场景中有一个框,我想用键盘控制。我想要W,S和上/下箭头来控制向前和向后移动,并且我希望A,D和左/右箭头向左或向右旋转框。获取A帧中实体的方向矢量

我设法让箱子前后移动并使箱子旋转。问题是当箱子旋转时,我希望能够按前进/后退键将其向新方向移动,但现在它仍然在原始方向上前后移动。

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) 

我试图得到一个方向向量,并以某种方式使用它,但我相当的时刻卡住。

回答

1

基本问题是你设置的是对象在世界空间中的位置,而不是沿着它自己的对象空间坐标移动它。

有几种方法可以解决这个问题,最简单的方法就是使用Object3D的翻译方法,该方法将物体沿标准化轴移动。相反,设置属性的尝试调用

rover.translateZ(# of units)

等等等等另见:

How to move an object forward in Three.js?

+1

完美的作品,非常感谢!必须首先将我的实体转换为一个对象,才能使它看起来很有效。 'var rover = document.getElementById('rover')。object3D;' – smuvv