[three.js] 피봇 위치 설정하기

* 오브젝트 포커스 기능(F단축키)

Maya, Max와 같은 3D프로그램에서 'F'키 입력 시, 카메라 뷰가 오브젝트로 맞춰진다. three.js에서 F(포커싱)단축키 기능을 구현하려면, 빈 Object3D 객체를 통해 센터 피봇을 정한 뒤 .attach 메서드로 포커싱 오브젝트를 붙여주면 된다.  

 

See the Pen three.js center pivot by hub cg (@hub-cg) on CodePen.

 

 

1] 원점에서 오브젝트 거리 계산

let objSize = new THREE.Box3().setFromObject( text );
let centerPos = new THREE.Vector3( 
 	( objSize.max.x - objSize.min.x ) / 2.0,
	( objSize.max.y - objSize.min.y ) / 2.0,
	( objSize.max.z - objSize.min.z ) / 2.0
);

// centerPos= 센터피봇(center pivot)
// objSize= 오브젝트와 거리계산

 

 

 

2] 피봇 생성

// ...
let textPivot = new THREE.Object3D();

textPivot.position.set( centerPos.x, centerPos.y, centerPos.z );
textPivot.attach( text );
scene.add( textPivot );

// 피봇 위치 설정 및 object 붙이기

 

 

 

 

3] 'F'키보드 이벤트 생성

window.addEventListener('keydown', (e) => {
    let keyName = e.key;

    if( keyName === 'f') {

        let objSize = new THREE.Box3().setFromObject( text );
        let centerPos = new THREE.Vector3( 
            (objSize.max.x - objSize.min.x) / 2.0,
            (objSize.max.y - objSize.min.y) / 2.0,
            (objSize.max.z - objSize.min.z) / 2.0
        );

        camera.position.x = centerPos.x;
        camera.position.y = centerPos.y;
        camera.position.z = centerPos.z;

        camera.position.z += 20;
        camera.position.x += 1;
        camera.lookAt( text );
    
    }
    
}); 
//키보드 이벤트

 

**중복되는 objSize, centerPos 부분은 함수로 따로 구현하는 편을 추천함.