three.js Camera Control - OrbitControls

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

OrbitControls 개체를 생성하여 마우스로 카메라를 조작할 수 있었다.

OrbitControls의 여러 옵션에 대해서 알아보자.

 

// 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);
}

위 코드는 20개의 box geometry를 생성하고, color값의 rgb를 랜덤한 값으로 설정하여 랜덤색의 box들을 position 여기저기에 설치하는 코드이다.

(※ color의 값은 정수로 설정하지 않으면 반영되지 않는다.)

 

 

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

...

function draw() {
    const delta = clock.getDelta();

    controls.update(); 

    renderer.render(scene, camera);
    renderer.setAnimationLoop(draw);
}

OrbitControls 객체의 enableDamping 설정을 true로 하면 마우스 움직임에 관성이 생긴다.

 

 

controls.enableZoom = false;
controls.maxDistance = 10;
controls.minDistance = 2;

 

줌 사용을 금지시키거나,

최대한 떨어질 수 있는 카메라 거리, 가장 가까워질 수 있는 최소한의 거리도 설정가능하다.

 

 

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

카메라가 회전축으로부터 기울수 있는 최소/최대 각도도 설정 가능하다.

 

controls.target.set(2,2,2);
controls.autoRotateSpeed = 50;

카메라가 포커싱한 타켓을 설정하거나, 왼쪽 클릭으로 회전할 때 속도도 지정가능하다.