TrackballControls

TrackballControls는 Three.js 라이브러리에서 카메라의 이동, 회전, 확대/축소 등의 제어를 쉽게 할 수 있게 도와주는 컨트롤 클래스입니다. 마우스와 터치를 이용하여 3D 장면을 탐색할 수 있도록 해줍니다. TrackballControls를 사용하면 카메라를 자유롭게 움직이며 3D 모델을 관찰할 수 있습니다.

주요 기능

• rotate: 마우스를 드래그하여 카메라를 회전시킵니다.
• zoom: 마우스 휠을 사용하여 카메라를 확대/축소합니다.
• pan: 마우스를 드래그하여 카메라를 이동시킵니다.
• reset: 초기 상태로 되돌립니다.

import * as THREE from 'three';
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls';

let camera, scene, renderer, controls;

function init() {
  // 씬 생성
  scene = new THREE.Scene();
  
  // 카메라 설정
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 5;

  // 렌더러 설정
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // TrackballControls 설정
  controls = new TrackballControls(camera, renderer.domElement);
  controls.dynamicDampingFactor = 0.2; // 제어의 저항을 설정

  // 예제용 큐브 생성
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  // 애니메이션 루프
  function animate() {
    requestAnimationFrame(animate);
    controls.update(); // TrackballControls 업데이트
    renderer.render(scene, camera);
  }
  animate();

  // 창 크기 변경 시 카메라와 렌더러 크기 재설정
  window.addEventListener('resize', onWindowResize, false);

  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }
}

init();

주요 이벤트 종류

1. start: 사용자가 조작을 시작할 때 발생합니다. 예를 들어, 마우스 버튼을 누르거나 특정 키를 누르면 start 이벤트가 발생합니다.
2. end: 사용자가 조작을 종료할 때 발생합니다. 예를 들어, 마우스 버튼을 놓거나 특정 키를 누르지 않게 되면 end 이벤트가 발생합니다.
3. change: 사용자가 조작을 통해 장면이 변경될 때 발생합니다. 예를 들어, 마우스를 움직이거나 휠을 돌릴 때 change 이벤트가 발생합니다.
4. update: 장면이 업데이트될 때 발생합니다. 이 이벤트는 주기적으로 장면을 업데이트할 때 사용됩니다

const controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.addEventListener('start', function () {
  blocker.style.display = '';
});
controls.addEventListener('end', function () {
  blocker.style.display = 'none';
});
controls.addEventListener('change', function () {
  // 조작에 따라 장면을 업데이트할 수 있습니다
});