마우스로 화면 조절하기

화면을 마우스로 회전하고 줌인, 줌아웃하는 방법을 알아보자!

📌 OrbitControls 임포트

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

📌 OrbitControls 추가 

카메라 세팅 이후에 설정해야 한다.

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

화면을 마우스로 자유자재로 움직이고 확대 축소도 할 수 있다.

줌인/줌아웃의 경우 무한정으로 계속 줌인/줌아웃이 되다보니 화면에서 사라지는 경우가 생긴다.

다음처럼 확대/축소, 줌인/줌아웃을 제한할 수 있다.

// 줌인 줌아웃 각도 제한
controls.minDistance = 2
controls.maxDistance = 6
controls.maxPolarAngle = Math.PI / 2

 

[참고]

https://designbase.co.kr/threejs-10/

자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌 | 디자인베이스