BA.JS: Nhận kích thước đối tượng liên quan đến máy ảnh và vị trí đối tượng trên màn hình

Question

Tôi là người mới bắt đầu lập trình 3D, tôi đã bắt đầu khám phá thế giới 3D từ WebGL với Three.JS.

Tôi muốn xác định trước kích thước đối tượng trong khi tôi thay đổi vị trí camera.position.z và đối tượng "Z" của đối tượng.

Ví dụ: tôi có lưới lập phương có kích thước là 100x100x100.

cube = new THREE.Mesh(
     new THREE.CubeGeometry(100, 100, 100, 1,1,1, materials),  
     new THREE.MeshFaceMaterial() 
    ); 

và cam với tỷ lệ khía cạnh của 1,8311874

camera = new THREE.PerspectiveCamera(45, aspect_ratio, 1, 30000); 

Tôi muốn biết kích thước (2D rộng & chiều cao) của đối tượng hình khối trên màn hình khi,

camera.position.z = 750; 
cube.position.z = 500; 

Có cách nào để tìm nó/xác định trước nó không?

Answer 1

Bạn có thể tính toán chiều cao nhìn thấy được cho một khoảng cách nhất định từ máy ảnh bằng cách sử dụng các công thức được giải thích trong Three.js - Width of view.

var vFOV = camera.fov * Math.PI/180;  // convert vertical fov to radians 
var height = 2 * Math.tan(vFOV/2) * dist; // visible height 

Trong trường hợp của bạn máy ảnh FOV là 45 độ, vì vậy

vFOV = PI/4. 

(Lưu ý: trong three.js các lĩnh vực máy ảnh-of-view FOV là dọc một, không phải là ngang .! một)

khoảng cách từ camera đến mặt trước (quan trọng) của khối này là 750-500 - 50 = 200. Vì vậy, chiều cao có thể nhìn thấy trong trường hợp của bạn là

height = 2 * tan(PI/8) * 200 = 165.69. 

Kể từ khi mặt phía trước của khối lập phương là 100 x 100, cho phần của mức độ cao có thể nhìn thấy đại diện bởi các khối lập phương là

fraction = 100/165.69 = 0.60. 

Vì vậy, nếu bạn biết được chiều cao vải bằng pixel, sau đó chiều cao của khối lập phương tính bằng pixel gấp 0,60 lần giá trị đó.

Liên kết tôi cung cấp cho biết cách tính chiều rộng có thể nhìn thấy, vì vậy bạn có thể thực hiện phép tính đó theo cách tương tự nếu bạn cần.