[ #5 ] ThreeJS의 Controls

★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★  

 

ThreeJS에서 제공하는 다양한 Controls 클래스에 대해 알아보자!

👇 기본 ThreeJS의 틀은 아래 게시글을 참고하세용

[ #1 ] ThreeJS의 기본 틀

 

 

🍀 Controls 사용법

기존 Three 라이브러리를 사용했던 방법과는 달리,
직접 Three 라이브러리 모듈 내의 클래스를 명시해주어야 합니다!

[ Import ]

// OrbitControls의 import 예시
// 1. three/examples/jsm/controls/~
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 2. three/addons/controls/~
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

// 최신 버전의 ThreeJS는 '/examples/jsm/' 대신 '/addons/'를 사용할 수 있도록 변경되었음

[ Controls Object 생성 ]

const orbitControls = new OrbitControls(camera, canvas);
// new 키워드를 사용한 후, Controls Class 바로 호출

 

 

🍀 Controls

각각의 Controls에는 다양한 메서드가 존재하므로, 공식문서를 통해 한 번 알아두는 것이 중요합니다!

이런 기능이 있는지 없는지 파악하는 것만으로도 큰 도움이 됩니다요..!

 

[ 🕹️ OrbitControls ]

three.js docs

• 카메라가 중심점을 기준으로 공전 및 확대/축소 

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);
// 인자 요소 :  (camera 객체, renderer 객체)

 

[ 🕹️ TrackballControls ]

three.js docs

• 카메라가 사용자가 마우스를 드래그한 방향으로 이동하며, 자유로운 회전이 가능
• OrbitControls와 비슷하지만, 수직 각도에 제한이 없음

import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';

const controls = new TrackballControls(camera, renderer.domElement);

 

[ 🕹️ FlyControls ]

three.js docs

• 카메라가 자유롭게 날아다니느 것처럼 이동

import { FlyControls } from 'three/examples/jsm/controls/FlyControls.js';

const controls = new FlyControls(camera, renderer.domElement);

 

[ 🕹️ FirstPersonControls ]

three.js docs

• 사용자가 1인칭 시점으로 카메라를 조작하며, 이동과 회전이 가능
• FlyControls와 비슷하지만, 위쪽 축이 고정되어있음 (하늘을 향해 나는 듯한 이동은 불가능)  

import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonControls.js';

const controls = new FirstPersonControls(camera, renderer.domElement);

 

[ 🕹️ PointerLockControls ]

three.js docs

• 마우스 포인터를 숨기고 마우스 움직임을통해 카메라를 제어  

import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js';

const controls = new PointerLockControls(camera, renderer.domElement);

 

[ 🕹️ DragControls ]

three.js docs

• 3D 객체를 마우스로 드래그할 수 있음

import { DragControls } from 'three/examples/jsm/controls/DragControls.js';

const controls = new DragControls(objects, camera, renderer.domElement);

 

[ 🕹️ TransformControls ]

three.js docs

• 3D 객체의 이동, 회전, 스케일의 조정

import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';

const controls = new TransformControls(camera, renderer.domElement);

 

 

🍀 OrbitControls 예제

이 예제는 OrbitControls의 기능 중 하나인 'Damping'을 구현하는 코드의 예제입니당!

이 예제에서는 단순히 Damping 기능의 활성화만 다루고 있지만,
OrbitControls의 다양한 메서드를 통해 Damping의 정도, 공전각도 또한 설정할 수 있어요우!

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

// Sizes
const sizes = {
  width: 800,
  height: 600,
};

// Canvas
const canvas = document.querySelector("canvas.webgl");

// Scene
const scene = new THREE.Scene();

// Object
const mesh = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1, 5, 5, 5),
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
scene.add(mesh);

// Camera
const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.1,
  100
);
camera.position.z = 3;
camera.lookAt(mesh.position);
scene.add(camera);

// Controls
const orbitControls = new OrbitControls(camera, canvas);
orbitControls.enableDamping = true; // Damping 기능 활성화

// Renderer
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
});
renderer.setSize(sizes.width, sizes.height);

// Animate
const tick = () => {
  orbitControls.update(); // Controls의 Update로 Damping 애니메이션 활성화
  renderer.render(scene, camera);
  window.requestAnimationFrame(tick);
};

window.requestAnimationFrame(tick);

짜잔 위와 같이 부드러운 움직임을 추가할 수 있습니당!