threeJs 공부2

캐릭터 움직이기

주변 둘러보기

Pointer Lock API
1인칭 3D 게임에 이상적인 api로 마우스를 이용하여 주의를 둘러볼 때 유용한 api

웹 보호 규칙? 으로 인해서 자동으로 적용되지 않아 이벤트 리스너를 통해 락을 해야한다.

import { PointerLockControls } from '@react-three/drei';

를 사용하면 좀더 편하게 이용 가능

상하좌우 움직이기

 useFrame(() => {
    if (!ref.current) return;
    camera.position.copy(ref.current.position);

    const direction = new Vector3();
    const frontVector = new Vector3(
      0,
      0,
      (moveBackward ? 1 : 0) - (moveForward ? 1 : 0),
    );
    const sideVector = new Vector3(
      (moveLeft ? 1 : 0) - (moveRight ? 1 : 0),
      0,
      0,
    );

    // length 1로 변환 normalize
    direction
      .subVectors(frontVector, sideVector)
      .normalize()
      .multiplyScalar(SPEED)
      .applyEuler(camera.rotation);

    api.velocity.set(direction.x, 0, direction.z);

    // 새로 추가
    ref.current.getWorldPosition(ref.current.position);
  });

youtube랑 기존의 존재하는 코드들을 참고하였으나 동작하지 않아 구글링 후
ref.current.getWorldPosition(ref.current.position); 추가 작성하여 동작확인

결과