OrbitControls

마우스를 이용하여 카메라가 대상 주위를 공전 할 수 있습니다.

OrbitControls sample 예제 소스

핵심 소스

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

export class OrbitControlsComponent implements AfterViewInit {
  ..........
  ngAfterViewInit() {
    this.controls = new OrbitControls( this.camera, this.renderer.domElement );
  }

   private render() {
    this.controls.update(); // autoRotate 활성화 하거나 enableDamping=true 일 경우 이 부분이 반드시 필요
    this.renderer.render( this.scene, this.camera );
  }

  private update = () => {
    this.render();
    requestAnimationFrame(this.update); // request next update
  }
}

properties

• .enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled

damping 이란 진동이나 운동을 감소시키는 것을 말한다. orbitcongtrols에서 damping이 적용되면 이동이 부드럽게 이루어진다.

• .dampingFactor = 1; The damping inertia used if .enableDamping is set to true. Default is 0.05. Note that for this to work, you must call .update() in your animation loop.
• .minDistance = 1; : How far you can dolly in ( PerspectiveCamera only ). Default is 0.
• .maxDistance = Infinity; How far you can dolly out ( PerspectiveCamera only ). Default is Infinity.
• .maxPolarAngle = Math.PI / 2; //How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.
• .zoomSpeed = 0.5;Speed of zooming / dollying. Default is 1.