Three.js의 OrbitControls 클래스는 3D 장면에서 카메라를 마우스 또는 터치로 제어하는 데 사용됩니다. 이를 통해 사용자는 3D 장면의 카메라를 회전, 줌(확대/축소), 팬(이동)하는 인터랙션을 쉽게 구현할 수 있습니다. OrbitControls는 주로 카메라의 시점을 자유롭게 조작하는 애플리케이션에서 많이 사용됩니다.
먼저 이 class를 사용하려면 import 를 해야 합니다. npm install three 로 설치했다면 별도로 추가 설치는 필요없고, 파일로 불러 옵니다.
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
Three.js의 docs 에서 위와 같이 추천하는 이유는 node_modules 의 three/package.json 에 아래와 같이 동일시 하였습니다.
"exports": {
...
...
"./examples/jsm/*": "./examples/jsm/*",
"./addons": "./examples/jsm/Addons.js",
"./addons/*": "./examples/jsm/*",
...
그러나 이것에 에러가 걸리는 경우가 있을때에는 원래 경로로 아래 처럼 합니다. ( 이 문제는 VS Code ?? )
import { OrbitControls } from 'three/samples/jsm/controls/OrbitControls.js';
const controls = new THREE.OrbitControls(camera, renderer.domElement);
1. controls.target: 카메라가 바라볼 중심점. 카메라가 항상 이 포인트를 바라보도록 합니다. 기본값은 (0, 0, 0)이며, 원하는 위치로 설정할 수 있습니다.
controls.target.set(1, 1, 1);
2. controls.enableDamping: 감속(관성 효과)을 사용할지 여부를 설정. true로 설정하면 카메라 이동이 부드럽게 변화는 효과가 있습니다.
controls.enableDamping = true;
3. controls.dampingFactor: 감속 효과의 강도를 설정하는 값. (0에 가까울수록 감속이 덜 발생, 1에 가까울수록 더 강한 감속)
controls.dampingFactor = 0.05;
4. controls.enableZoom: 줌 기능 활성화 여부. 기본값은 true.
controls.enableZoom = false; // 줌 비활성화
5. controls.zoomSpeed: 줌 속도. 기본값은 1.0이며, 숫자가 클수록 줌 속도가 빨라집니다.
controls.zoomSpeed = 0.8;
6. controls.enableRotate: 카메라 회전 기능을 활성화할지 여부. 기본값은 true.
controls.enableRotate = false; // 회전 비활성화
7. controls.rotateSpeed: 카메라 회전 속도. 기본값은 1.0.
controls.rotateSpeed = 1.5;
8. controls.enablePan: 팬 기능 활성화 여부. 팬은 카메라의 시점을 옆으로 이동시키는 기능입니다. 기본값은 true.
controls.enablePan = false; // 팬 비활성화
9. controls.panSpeed: 팬 이동 속도. 기본값은 1.0.
controls.panSpeed = 0.5;
10. controls.maxDistance: 카메라가 줌아웃할 수 있는 최대 거리. 기본값은 Infinity.
controls.maxDistance = 100; // 최대 줌아웃 거리 설정
11. controls.minDistance: 카메라가 줌인할 수 있는 최소 거리. 기본값은 0.
controls.minDistance = 10; // 최소 줌인 거리 설정
12. controls.maxPolarAngle: 카메라의 회전 각도를 제한하는 최대 극각. 값은 라디안 단위로 설정하며, 기본값은 Math.PI(180도).
controls.maxPolarAngle = Math.PI / 2; // 최대 회전 각도 (90도)
13. controls.minPolarAngle: 카메라의 회전 각도를 제한하는 최소 극각. 기본값은 0.
controls.minPolarAngle = 0; // 최소 회전 각도 (0도)
1. controls.update(): 카메라의 움직임이나 감속 효과를 반영하기 위해 매 프레임마다 호출해야 하는 메소드. 특히 enableDamping을 활성화한 경우 이 메소드를 반드시 호출해야 합니다.
function animate() {
requestAnimationFrame(animate);
controls.update(); // OrbitControls 업데이트
renderer.render(scene, camera);
}
animate();
2. controls.reset(): 카메라와 컨트롤을 초기 상태로 리셋합니다.
controls.reset();
3. controls.dispose(): 이벤트 리스너를 제거하고 메모리를 해제하는 메소드. 컨트롤이 더 이상 필요 없을 때 호출합니다.
controls.dispose();
4. controls.saveState(): 현재 카메라의 상태를 저장합니다. 나중에 controls.reset()을 호출할 때 이 상태로 복구됩니다.
controls.saveState();
5. controls.addEventListener() / controls.removeEventListener(): 특정 이벤트(예: change 이벤트)를 처리할 리스너를 추가 또는 제거합니다. change 이벤트는 카메라의 시점이 변경될 때 발생합니다.
controls.addEventListener('change', () => {
console.log('Camera position changed');
});
이벤트의 종류는 change/ start/ end 가 있습니다.
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// OrbitControls 생성
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 감속 효과 활성화
controls.dampingFactor = 0.05; // 감속 강도 설정
controls.maxPolarAngle = Math.PI / 2; // 수직 회전 제한 (최대 90도)
controls.minDistance = 2; // 줌인 최소 거리
controls.maxDistance = 50; // 줌아웃 최대 거리
function animate() {
requestAnimationFrame(animate);
controls.update(); // 매 프레임마다 호출해야 함
renderer.render(scene, camera);
}
animate();
dai-gui, lil-gui 차이점(2) (0) | 2024.09.23 |
---|---|
material.clone(), random colors (0) | 2024.09.21 |
Object3D - three.js (0) | 2024.09.21 |
MeshLambertMaterial (1) | 2024.09.20 |
THREE.Clock() - 주요 메소드 (0) | 2024.09.18 |