[cameral control] OrbitControls / TrackballControls

---

OrbitControls

---

- orbitcontrols 같은경우에는 사용할때 import를 해서 사용해야한다.

- 인자는 2개가 들어간다. 첫번째로는 camera가 들어와야하며 두번째로는 renderer의 domElement가 들어와야한다.

 

 

여러가지의 mesh를 가지고 싶다면 어떻게해야할까?

 

틀은 하나를 가지고 공유를 한다고 하면

	const geometry = new THREE.BoxGeometry(1, 1, 1);
    let mesh;
    let material;
    for (let i = 0; i < 20; i++) { 
        material = new THREE.MeshStandardMaterial({
            color: `rgb(
				${ 50 + Math.floor(Math.random() * 205) },
				${ 50 + Math.floor(Math.random() * 205) },
				${ 50 + Math.floor(Math.random() * 205) }
			)`
		});
		mesh = new THREE.Mesh(geometry, material);
		mesh.position.x = (Math.random() - 0.5) * 5;
		mesh.position.y = (Math.random() - 0.5) * 5;
        mesh.position.z = (Math.random() - 0.5) * 5;
        scene.add(mesh);
    }

우선 geometry 뼈대 박스 하나를 만들어준다.

바깥에 입혀줄 materail같은경우는 색상을 랜덤으로 만들어줄것이기때문에

for문안에서 돌려준다. 또한 mesh를 20개를 만들어서 scene에 모두 붙여줄것이므로 나머지도 for문 안에서 작성한다.

 

rgb값은 255까지가 최대이므로,0-1의 랜덤한값에 205를 곱한것. 0-205 + 50 => 50부터 255사이의 컬러값을가진다.

검정색일경우는 안보이기때문에 이렇게 처리해준다.

 

---

enableDamping 컨트롤을 부드럽게해주는 메소드

---

 controls.enableDamping = true;

 

이렇게 하고나서 끝이아니고 

 

draw function 안에서 계속해서 업.데.이.트!! 시켜줘야지 부드럽게 실행이된다.

 

controls.update();

위의 코드도 함께 실행해준다.

 

---

maxDistance / minDistance

---

contorls.maxDistance = 10;

controls.minDistance = 10;

 

휠을 돌려서 가까워지고 멀어지고의 맥시멈 미니멈값을 정할 수 있다.

 

---

minPolarAngle

---

위와비슷하게 돌리는 각도에도 제한을 줄수있다.

controls.minPolarAngle = Math.PI / 4 ; 

controls.minPolarAngle = THREE.MathUtils.degToRad(45);

 

---

target.set

---

회전의 중심점에 target을 xyz로 잡아주는것

 

controls.target.set(2,2,2);

---

autoRotate

---

말 그대로 자동으로 돌아가게 해주는 값

 

controls.autoRotate = true;
controls.autoRotateSpeed = 50;

 

---

TrackBallControls

---

OrbintControls와 다른점

 

1. 수직방향으로도 지원한다.

2. controls.update(); 를 하지않으면 움직이지않는다.

3. 기본적으로 enableDamping으로 부드러운 효과를 지원한다.

 

 

사용옵션은 비슷하므로, 사용하고싶은것을 사용하면된다.