추적하기.

개발을 하면서 수학에 대해 중요성은 알았지만 직접 수학을 이용하는 도메인이 아니기 때문에

접할 수 있는 경험이 매우 적었다.

그래서 수학을 공부하려는데 그냥 하면 재미없으니까 이를 약간 코드로 적용시켜 시각적으로 보면서 공부하려고 한다.

이번에는 벡터을 공부하고 매우 쉬운 예제 코드를 만들어보았다.

벡터의 뺄셈을 통해 방향을 얻고 이를 방향 벡터로 만들면 렌더링 과정에서 지속적으로 target에 대한 방향을 얻을 수 있다.

만약 각 벡터 간의 거리를 얻고 싶다면 피타고라스 정리를 사용하면 된다.

이를 경찰과 도둑이라는 컨셉으로 만들어 보자.

우선 경찰을 만든다.

const geometry = new THREE.BoxGeometry( 5, 5, 5 );

const police = new THREE.Mesh( geometry, new THREE.LineBasicMaterial( { color: 0xff0000 } ) );

scene.add( police );

* Material은 점과 선을 공부하던 거라 막 넣었다.

이제 도망치는 도둑의 Mesh를 정의한다.

const geometry2 = new THREE.BoxGeometry( 5, 5, 5 );

const thief = new THREE.Mesh( geometry2, new THREE.LineBasicMaterial( { color: 0x000000 } ) );

thief.position.set(-15,15,-5);

scene.add( thief );

이제 추적하는 로직을 작성한다.

경찰이 도둑을 바라보도록 하는 방향 벡터(크기 1)를 구한 이후, 도둑을 잡을 속력을 곱해줍니다.

const vetctor = thief.position.clone().sub(police.position).clone();

vetctor.normalize();

vetctor.multiplyScalar(0.03);

이제 경찰 벡터에 도둑에 대한 방향을 갖고 속력 (크기)를 가진 벡터를 지속적으로 더해줍니다.

police.position.x +=vetctor.x;

police.position.y +=vetctor.y;

police.position.z +=vetctor.z;

다음은 원을 그리며 y축 기준으로 빙글빙글 돌면서 도망치는 도둑을 만들어 줘야 합니다.

thief.position.x = Math.sin(time / 500) * radius;

thief.position.z = Math.cos(time / 500) * radius;

그 결과는 다음과 같다.

평생 잡을 수 없을 것 같지만 속력을 올려주면 다음과 같아진다.

let speed = 0.05;

const animete = (time) => {
    camera.lookAt(scene.position);
    camera.updateProjectionMatrix();

    const vetctor = thief.position.clone().sub(police.position).clone();
    vetctor.normalize();
    speed += 0.001;
    vetctor.multiplyScalar(speed);

    police.position.x +=vetctor.x;
    police.position.y +=vetctor.y;
    police.position.z +=vetctor.z;

    thief.position.x = Math.sin(time / 500) * radius;
    thief.position.z = Math.cos(time / 500) * radius;



    renderer.render(scene, camera);
    requestAnimationFrame(animete);
};