three.js에서 카메라 좌표를 객체에 설정하는 방법은 무엇입니까? "webgl obj + mtl loader"예제 사용

Question

나는 .obj 형식의 3D model입니다. 그러나이 3D 모델의 좌표는 (0,0,0)이 아닙니다. 이것은 무인 항공기 이미지의 3D 렌더링이므로 좌표는 실제 지리 참조 연산 된 좌표입니다.

webgl에서 mtl을 사용하여 obj를로드하는 방법에 대한 예제는 Three.js의 예제를 따르고 있습니다. 나는 원래 HTML을 사용하는데, 나는 단순히 male02로 표시된 obj를 CerroPelaoLow로 대체하고 파일은 obj 디렉토리에 배치됩니다. Firefox는 모델을 올바르게 표시하지만 위치가 문제입니다.

이 렌더링은 이런 방식으로 프로그램에 의해 생성되며 Meshlab과 같은 프로그램으로 모델을 조작 할 수는 있지만 가능한 최소 조작을 선호합니다.

개체의 로컬 좌표를 사용하거나 카메라를 초점을 맞춘 다음 다른 컨트롤 집합을 사용하려면 어떻게해야합니까?

Answer 1

개체의 지오메트리의 boundingSphere 또는 boundingBox을 사용하여 위치와 카메라를 결정할 수 있습니다. 개체 또는 집합 개체를 포커스하는 기능을 이미 구현했습니다. 여기 코드를 공유합니다 :

// assuming following variables: 
// object -> your obj model (THREE.Mesh) 
// camera -> PerspectiveCamera 
// controls -> I'm also using OrbitControls 


// if boundingSphere isn't set yet 
object.computeBoundingSphere(); 

var sphere = object.geometry.boundingSphere.clone(); 
sphere.applyMatrix4(object.matrixWorld); 

// vector from current center to camera position (shouldn't be zero in length) 
var s = new THREE.Vector3().subVectors(camera.position, controls.center); 

var h = sphere.radius/Math.tan(camera.fov/2 * Math.PI/180); 

var newPos = new THREE.Vector3().addVectors(sphere.center, s.setLength(h)); 

camera.position.copy(newPos); 
controls.center.copy(sphere.center);