OrbitControls

설명

• 궤도 컨트롤을 사용하면 카메라가 대상 주위를 선회할 수 있습니다.
• 사용자의 마우스 이벤트를 감지하여, 카메라를 이동시키거나 회전시키는 등의 작업을 수행합니다. 그러나 이러한 변화를 실제로 적용하려면 매 프레임마다 update 메서드를 호출하여 카메라의 변화를 적용해 주어야 합니다.

update를 호출해야 할 때

• 카메라 시점 수동으로 바꿀 때
  • OrbitControls가 카메라의 위치, 시점을 바꾸는 역할을 하기 때문에, 사용자가 직접 카메라의 위치를 바꾸는 경우 변경 후에 OrbitControls 클래스의 update() 메서드를 호출하여 카메라의 위치와 시점 등을 업데이트해야 합니다. (그래야 OrbitControls 클래스가 제공하는 인터랙션 기능과 수동으로 변경된 카메라 위치나 시점 등이 일치함)
• autoRotate 또는 enableDamping 설정시 렌더링 호출 함수 내에서
  • 자동으로 회전시키는 경우(autoRotate)나 부드러운 움직임(enableDamping)을 설정한 경우 사용자가 인터랙션을 하지 않는경우에도 카메라가 회전하도록 하는 것이기 때문에 매 렌더링마다 orbitControls의 update함수를 호출해야 합니다. 
  • 대부분의 상황에서 update() 메서드가 애플리케이션의 성능에 큰 영향을 미치지는 않습니다. OrbitControls 클래스는 내부적으로 효율적으로 작동하도록 최적화되어 있으며, update() 메서드 내에서 수행하는 작업도 크게 복잡하지 않습니다. 따라서, OrbitControls 클래스를 사용하는 경우, 매 렌더링마다 update() 메서드를 호출해주는 것은 일반적으로 권장되는 패턴입니다.

사용

• 이를 사용하려면 /examples 디렉토리의 모든 파일과 마찬가지로 HTML에 파일을 별도로 포함시켜야 합니다.

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

예

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );

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

//controls.update() must be called after any manual changes to the camera's transform
camera.position.set( 0, 20, 100 );
controls.update(); //카메라 위치 직접 바꾼 다음 orbitcontrol update

function animate() {

    requestAnimationFrame( animate );

    // required if controls.enableDamping or controls.autoRotate are set to true
    controls.update();  //렌더링 전에 카메라 인터랙션 적용

    renderer.render( scene, camera );

}