Three.js가 object3D 크기를 기준으로 카메라 거리를 결정합니다.

Question

뷰포트에서 전체 모델을 구성하기 위해 메쉬 모음 인 객체 3D에서 카메라가 얼마나 멀리 떨어져 있어야하는지 결정하려고합니다.

은 내가 object3D 크기를 다음과 같이 얻을 :

public getObjectSize (target: THREE.Object3D): Size { 
    let box: THREE.Box3 = new THREE.Box3().setFromObject(target); 
    let size: Size = { 
    depth: (-1 * box.min.z) + box.max.z, 
    height: (-1 * box.min.y) + box.max.y, 
    width: (-1 * box.min.x) + box.max.x 
    }; 
    return size; 
} 

다음 내가 다시 카메라가 볼 수 있도록 전체 상자의 순서를 그 상자의 크기를 기준으로 할 필요가 얼마나 멀리 결정하기 위해 시도 삼각 사용 .

private determinCameraDistance(): number { 
    let cameraDistance: number; 
    let halfFOVInRadians: number = this.geometryService.getRadians(this.FOV/2); 
    let height: number = this.productModelSizeService.getObjectSize(this.viewService.primaryView.scene).height; 
    let width: number = this.productModelSizeService.getObjectSize(this.viewService.primaryView.scene).width; 
    cameraDistance = ((width/2)/Math.tan(halfHorizontalFOVInRadians)); 
    return cameraDistance; 
} 

모든 종이 삼각형 (카메라 거리)의 인접 측면의 길이상에서 작동은 수학^2 + B^2 = C^2를 사용하여 검증 할 수있다. 그러나 몇 가지 이유 때문에 반환 된 거리는 10.4204이지만 카메라 거리는 전체 object3D가 실제로는 95 (하드 코딩 된 값으로 결정됨)임을 보여줘야 내 모델의 작은 부분 만 볼 수 있습니다.

내가 무엇을 잘못하고 있었는지에 대한 아이디어 또는이를 확인하는 더 좋은 방법.

FOV = 110 degrees, 
Object3D size: { 
    Depth: 11.6224, 
    Height: 18.4, 
    Width: 29.7638 
} 

그래서 우리는 반을 : 계산에 사용 된

실제 숫자는 카메라의 거리 단위로 단위 크기 상자에서 갈 때 내가 부족 단위 변환의 어떤 종류가있는 것처럼 나에게 보인다 카메라의 거리를 따라 배치 된 인접한면으로 직각 삼각형을 만드는 시야는 55도입니다. 그런 다음 수식 Degrees * PI/180을 사용하여 55도를 라디안으로 환산하여 0.9599로 변환합니다. 다음으로 우리는 object3D 너비의 절반을 다시 취하여 14.8819 인 직각 삼각형을 만듭니다. 우리는 이제 반쪽 너비를 가져 와서 FOV의 접선 (라디안)으로 나눌 수 있습니다. 이렇게하면 인접 사이드/카메라 거리가 10.4204 인 길이가됩니다.

우리는 더이 내가 다시 SOHCAHTOA를 사용하여 빗변의 길이를 얻을 것이다 이쪽의 정확한 길이를 확인할 수 있습니다

Sin(55) = 14.8819/y 
.8192 * y = 14.8819 
y = 14.8819/.8192 
y = 18.1664 

지금 확인 B에 대한 우리가 피타고라스의 정리를 사용하여이를 사용하여 해결 우리의 수학.

14.8819^2 + b^2 = 18.1664^2 
221.4709 + b^2 = 330.0018 
b^2 = 108.5835 
b = 10.4203 (we're off by .0001 but that's due to rounding) 

Answer 1

THREE.js 필드에서 세로보기 영역을 나타내는 문제가 발생했습니다. 저는 마야 (Maya)와 다른 어플리케이션이 가로보기 영역으로서 시야 (Field of View)를 사용한다고 가정했습니다.

가로 세로 비율에 의해 얻은 FOV를 곱하면 올바른 가로 시야각을 얻을 수 있습니다. 카메라의 거리는 ~ 92입니다.