카메라 컨트롤, OrbitControls

 

OrbitControls

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 
// 기본적인 장면, 카메라, 렌더러 설정
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 카메라 컨트롤 설정
const controls = new OrbitControls(camera, renderer.domElement);
 
// 카메라 초기 위치 설정
camera.position.set(0, 5, 10);
controls.update();
 
// 애니메이션 루프
function animate() {
    requestAnimationFrame(animate);
    controls.update(); // 매 프레임마다 컨트롤 업데이트
    renderer.render(scene, camera);
}
 
animate();

https://threejs.org/docs/index.html#examples/en/controls/OrbitControls

• Three.js에서 카메라의 시점을 마우스나 터치 입력을 통해 사용자가 직관적으로 조작할 수 있게 해주는 컨트롤이다.
• 이 컨트롤은 카메라를 중심으로 궤도를 돌듯이 이동시킬 수 있어서, 사용자가 씬(scene) 내의 오브젝트를 다양한 각도에서 관찰할 수 있게 한다.
• 수직 방향 회전은 기본값은 180도 범위 내에서 된다.
• 수평 방향 회전의 기본값은 무한히 가능하다.

 

 

코드 설명

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

three.js의 core에는 OrbitControls가 포함되어 있지 않기 때문에 import 해주기

 

 

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const controls = new OrbitControls(camera, renderer.domElement);

controls에는 2개의 인자가 들어간다.

첫 번째 인자 - 카메라가 들어간다.

두 번째 인자 - 캔버스 객체를 가리키는 renderer.domElement이 들어간다.

 

 

OrbitControls 적용

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 
// 기본적인 장면, 카메라, 렌더러 설정
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 카메라 컨트롤 설정
const controls = new OrbitControls(camera, renderer.domElement);
 
// 카메라 초기 위치 설정
camera.position.set(0, 5, 10);
controls.update();
 
// 애니메이션 루프
function animate() {
    requestAnimationFrame(animate);
    controls.update(); // 매 프레임마다 컨트롤 업데이트
    renderer.render(scene, camera);
}
 
animate();

 

 

하나의 geometry 사용하여 각 각 색상을 무작위로 설정하기

 

RGB 코드

• RGB 코드는 색상을 나타내는 방법 중 하나로, 빨강(Red), 초록(Green), 파랑(Blue) 세 가지 기본 색상의 조합으로 색을 표현한다.
• 각 색상 값은 0에서 255까지의 정수로 표현한다.
• 색상 값이 0에 가까울수록 어둡다.

 

 

RGB 코드 형식

RGB 코드는 일반적으로 rgb(255, 255, 255)와 같은 형식으로 사용됩니다. 여기서:

• 첫 번째 값은 빨강 (R) 성분의 강도
• 두 번째 값은 초록 (G) 성분의 강도
• 세 번째 값은 파랑 (B) 성분의 강도

 

 

  /* Messh 만들기 */
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  let mesh;
  let material;
 
	const minColorValue = 50; // RGB 값의 최소값
  const colorRange = 255 - minColorValue; // RGB 값의 범위 (최대값 - 최소값)
  for (let i = 0; i < 20; i++) {
    material = new THREE.MeshStandardMaterial({
      color: `rgb(
				${minColorValue + Math.floor(Math.random() * colorRange)},
				${minColorValue + Math.floor(Math.random() * colorRange)},
				${minColorValue + Math.floor(Math.random() * colorRange)}
			)`
    });
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
  }

• Math.floor 정의해주기, rgb는 0 ~ 255 사이의 정수 값이 어야 한다.
• rgb(0, 0, 0)에 가깝게 나오면 어두운 색상이 나오게 되는데 현재 뒷배경이 검은색이기 때문에 최소 값을 50을 주어서 색상을 최대한 밝은 색상부터 랜덤 값을 돌리기
• rgb 최대값인 255에서 50 빼주기

 

 

Mesh의 위치 랜덤 조정

  /* Messh 만들기 */
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  let mesh;
  let material;
 
  const minColorValue = 50; // RGB 값의 최소값
  const colorRange = 255 - minColorValue; // RGB 값의 범위 (최대값 - 최소값)
  for (let i = 0; i < 20; i++) {
    material = new THREE.MeshStandardMaterial({
      color: `rgb(
				${minColorValue + Math.floor(Math.random() * colorRange)},
				${minColorValue + Math.floor(Math.random() * colorRange)},
				${minColorValue + Math.floor(Math.random() * colorRange)}
			)`
    });
 
    // Mesh 무작위 위치 조정
    const range = 0.5;
    const positionRange = 5; 
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.x = (Math.random() - range) * positionRange;
    mesh.position.y = (Math.random() - range) * positionRange;
    mesh.position.z = (Math.random() - range) * positionRange;
    scene.add(mesh);
  }

 

 

컨트롤 조정하는 옵션 enableDamping

/* Controls 만들기 */
const controls = new OrbitControls(camera, renderer.domElement); // 마우스를 이용해  3D 객체를 회전, 확대, 축소 가능
controls.enableDamping = true;

  function draw() {
    const delta = clock.getDelta();
		// 매 번 반복 실행하는 draw함수에서 controls 업데이트 메서드를 매 번 실행해줘야 한다.
    controls.update();
 
    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
  }

 

Three.js에서 OrbitControls를 사용할 때 카메라 이동이나 회전이 더 부드럽게 느껴지도록 만드는 옵션이다.

 

 

주요 포인트 ( enableDamping을 true로 설정 ) :

1. 감속 효과 (Damping Effect):
   • 카메라가 이동하거나 회전한 후 바로 멈추지 않고 점차적으로 멈춘다.
   • 이 감속 효과는 물리적인 마찰력과 비슷한 느낌을 준다.
2. 속성 설정:
   • 감속 효과를 활성화한다.
   • 이때, 감속 효과의 강도는 dampingFactor 속성으로 조절할 수 있다.
     
     
3. dampingFactor:
   • enableDamping이 활성화된 상태에서 감속 정도를 조절하는 값이다.
   • 예를 들어, controls.dampingFactor = 0.05;로 설정하면 감속이 천천히 일어나며 값이 작을수록 더 부드럽게 움직인다.
   • 기본값은 보통 0.25이다.
   • 너무 작은 값은 거의 즉각적인 멈춤을, 너무 큰 값은 느린 감속을 만들어낸다.
     
     
4. controls.update():
   • enableDamping을 사용할 때 애니메이션 루프에서 controls.update()를 호출한다. 이 함수는 각 프레임마다 카메라 위치와 회전을 업데이트하고 감속 효과를 적용한다.
     
     

 

 

속성 설정

// 줌 활성화 여부
controls.enableZoom = false;
 
// 거리 설정
controls.maxDistance = 10;
controls.minDistance = 3;
 
// 폴라 각도 설정
controls.minPolarAngle = Math.PI / 4; // 45도
controls.minPolarAngle = THREE.MathUtils.degToRad(45);
controls.maxPolarAngle = THREE.MathUtils.degToRad(135);
 
// 목표 설정, 카메라가 바라볼 중심점을 설정
controls.target.set(2, 2, 2);
 
// 카메라가 자동으로 회전할지 여부를 설정
controls.autoRotate = true;
 
// 카메라의 자동 회전 속도를 설정
controls.autoRotateSpeed = 50;
 

폴라 각도

• 카메라가 중심점에 대해 수직 방향으로 최소 회전 각도를 설정
• 이 값은 라디안으로 설정된다. Math.PI / 4는 45도에 해당한다.
• THREE.MathUtils.degToRad(45)는 같은 값을 라디안으로 변환하여 설정하는 방법

 

 

목표 설정

• 카메라가 바라볼 중심점을 설정
• 회전의 중심점의 타깃을 위치로 정해주는 것
• X, Y, Z 좌표 설정

 

 

카메라의 자동 회전 속도를 설정

• 초당 회전 속도를 설정
• 단위는 radians/second
• 값이 클수록 회전 속도가 빨라진다.