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;
• .minDistance = 1;
• .maxDistance = Infinity;
• .maxPolarAngle = Math.PI / 2; //
• .zoomSpeed = 0.5;