A- 프레임의 엔티티 방향 벡터 가져 오기

Question

키보드로 제어하려는 A- 프레임 장면의 상자가 있습니다. W, S 및 위쪽/아래쪽 화살표로 앞으로 및 뒤로 이동을 제어하고 A, D 및 화살표 왼쪽/오른쪽으로 상자를 왼쪽 또는 오른쪽으로 회전 시키려고합니다.

상자를 앞뒤로 움직이고 상자를 회전시킬 수 있도록했습니다. 문제는 상자가 회전 할 때 앞으로/뒤로 키를 눌러 새 방향으로 이동하려고하지만 지금은 여전히 ​​원래 방향으로 앞뒤로 이동한다는 것입니다.

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

기본 문제는 개체 공간 좌표를 따라 이동하는 대신 월드 공간에서 개체의 위치를 ​​설정하는 것입니다.

이 작업을 수행하는 방법은 여러 가지가 있습니다. 가장 간단한 방법은 정규화 된 축을 따라 객체를 이동하는 Object3D의 translate 메서드를 사용하는 것입니다. 대신 속성을 설정하는 등 등 참조

rover.translateZ(# of units)

를 호출하려고 : 완벽

How to move an object forward in Three.js?