카메라 컨트롤, FirstPersonControls

 

FirstPersonControls

 

3D 웹 애플리케이션에서 1인칭 시점(First-Person View)으로 장면을 탐색하고 상호작용할 수 있도록 해주는 컨트롤러이다. 사용자는 마우스와 키보드를 통해 1인칭 시점에서 자유롭게 카메라를 움직일 수 있다.

 

 

Fly Controls의 대체 구현이며 Fly Controls에서 몇 가지 기능을 추가하거나 수정해서 다시 만든 버전이라고 생각하면 된다.

 

 

import * as THREE from "three";
import { FirstPersonControls } from "three/examples/jsm/controls/FirstPersonControls";
 
/* 주제: FirstPersonControls */
 
export default function example() {
  /* Renderer 만들기 : html에 캔버스 미리 만들기 */
  const canvas = document.querySelector("#three-canvas");
  const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
 
  /* Scene 만들기 */
  const scene = new THREE.Scene();
 
  /* Camera 만들기 */
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.y = 1.5;
  camera.position.z = 7;
  scene.add(camera);
 
  /* Light 만들기 */
  const ambientLight = new THREE.AmbientLight("white", 0.5);
  scene.add(ambientLight);
 
  const directionalLight = new THREE.DirectionalLight("white", 1);
  directionalLight.position.x = 1;
  directionalLight.position.z = 2;
  scene.add(directionalLight);
 
  /* Controls 만들기 */
  const controls = new FirstPersonControls(camera, renderer.domElement);
  controls.movementSpeed = 10;
  // controls.activeLook = false;
  // controls.lookSpeed = 0.1;
  // controls.autoForward = true;
 
  /* Messh 만들기 */
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  let mesh;
  let material;
 
  const minColorValue = 50; // RGB 값의 최소값
  const colorRange = 255 - minColorValue; // RGB 값의 범위 (최대값 - 최소값)
  for (let i = 0; i < 20; i++) {
    material = new THREE.MeshStandardMaterial({
      color: `rgb(
				${minColorValue + Math.floor(Math.random() * colorRange)},
				${minColorValue + Math.floor(Math.random() * colorRange)},
				${minColorValue + Math.floor(Math.random() * colorRange)}
			)`
    });
 
    // Mesh 무작위 위치 조정
    const range = 0.5;
    const positionRange = 5;
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.x = (Math.random() - range) * positionRange;
    mesh.position.y = (Math.random() - range) * positionRange;
    mesh.position.z = (Math.random() - range) * positionRange;
    scene.add(mesh);
  }
 
  /* 그리기 */
  const clock = new THREE.Clock();
 
  function draw() {
    const delta = clock.getDelta();
    // update함수에 delta값을 넣어줘야 한다.
    controls.update(delta);
 
    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
  }
 
  function setSize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(scene, camera);
  }
 
  /* 이벤트 */
  window.addEventListener("resize", setSize);
 
  draw();
}
 

 

조작법

• 기본 조작은 방향키를 사용
  • 방향 조절 WSAD
  • 회전 Q, E
  • 카메라 이동 R, F
• 마우스 조작은 왼쪽은 앞으로 오른쪽은 뒤로 움직인다.

 

 

속성

• movementSpeed 마우스 클릭에 따라 앞, 뒤 속도 조절
• activeLook false이면 마우스는 고정, 키보드로 움직임만 가능해진다.
• lookSpeed 마우스를 움직일 때 카메라가 회전하는 속도를 제어
• autoForward 카메라가 자동으로 앞으로 이동하도록 설정