[WebGL] Three.js에서 객체의 '전방 벡터' 가져오기

Unity에서는 GameObject의 transform에 forward 가 정의되어 있어 월드 공간상에서 「전방은 어느 쪽인가」라고 하는 것을 취득할 수 있습니다.

게임에 한정하지 않고, 「객체의 전방」을 취득하고 싶은 경우는 있다고 생각합니다.
그래서 Three.js에서이 "객체의 전방"벡터를 얻는 메모입니다.

실제로 움직이는 샘플을 jsdo.it에 올렸습니다.

즉 "Z축이 어느쪽을 향하고 있는가"

실제로하는 것은 매우 간단합니다.
무엇을 가지고 전방인가 하면, 즉 "Z축이 현재 어디를 향하고 있는지"를 알면 요구하고 싶은 벡터를 얻을 수 있습니다.

잘 참고하게 하고 있는 사이트( 그 39 알고 있으면 편리? 월드 변환 행렬에서 정보를 추출합시다. )에 그 대답이 있습니다.

월드 변환 행렬을 얻으면 나머지는 간단한 곱셈으로 구할 수 있습니다.
원리, 개요에 대해서는 상기 사이트를 봐 주세요.

4차원 벡터와 행렬을 곱하는 것만

하는 것은 Z 값만 1 의 4차원 벡터를 곱하는 것입니다.
Three.js에서 할 수있는 방법은 다음과 같습니다.

var forward = new THREE.Vector4(0, 0, 1, 0);
forward.applyMatrix4(aMatrix).normalize();

이렇게 하면 해당 행렬에서 전방 벡터가 추출됩니다.
그리고는 이 벡터를 필요에 따라서 가공해 주면 목적 달성입니다.

실례

예를 들면 한 객체의 전방에 항상 다른 객체가 추종하는, 같은 일이라면 이하와 같이 쓸 수가 있습니다.

document.addEventListener('mousemove', function (e) {
    if (!dragging) {
        return;
    }
    var deltaX = e.pageX - prev.x;
    var deltaY = e.pageY - prev.y;

    box2.rotation.x += deltaY / 30;
    box2.rotation.y += deltaX / 30;
    // console.log(deltaX, deltaY);

    box2.matrixWorld.decompose(box.position, box.quaternion, box.scale);

    var forward = new THREE.Vector4(0, 0, 1, 0);
    forward.applyMatrix4(box2.matrix).normalize();
    forward.multiplyScalar(30);
    box.position.add(forward);

    prev.x = e.pageX;
    prev.y = e.pageY;
}, false);

js도. 다른 t 에 준 샘플의 해당 부분을 추출한 것입니다.
하고 있는 것은, 드래그 하면 box2 를 회전시켜, 그 전방의 약간 떨어진 위치에 box 가 추종한다는 것입니다.

덧붙여서 decompose 는 행렬로부터, 「위치」 「회전」 「스케일」의 값을 빼내 주는 편리한 메소드입니다.
이것으로 완전히 box2 의 위치와 회전을 카피해, 한층 더 위치를 조금만 전방으로 이동하고 있다는 것입니다.