THREE.JS: Pobierz rozmiar obiektu w odniesieniu do pozycji kamery i obiektu na ekranie

Question

Jestem początkującym programistom 3D, zacząłem odkrywać świat 3D z WebGL z Three.JS.

Chcę z góry określić rozmiar obiektu, a ja zmieniam położenie camera.position.z i obiektu "Z".

Na przykład: Mam oczko sześcianu o rozmiarze 100x100x100.

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

i krzywki z proporcji 1.8311874

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

chcę wiedzieć rozmiar (2D szerokość & wysokość) tego obiektu kostki na ekranie, gdy

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

Czy istnieje sposób, aby go znaleźć/ustalić z góry?

Answer 1

Możesz obliczyć wysokość widoczną dla określonej odległości od kamery, korzystając z formuł wyjaśnionych w 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 

W twoim przypadku aparat FOV wynosi 45 stopni, więc

vFOV = PI/4. 

(Uwaga: w Three.js kamery field-of-view FOV jest pionowy jeden, a nie poziomo .! jeden)

Odległość od kamery do czołowej (znaczenie) sześcianu wynosi 750 - 500 - 50 = 200. w związku z tym wysokość widoczny w Twoim przypadku jest

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

Ponieważ czołowa sześcianu wynosi 100 x 100, frakcja widzialnego wysokość reprezentowanego przez sześcianu jest

fraction = 100/165.69 = 0.60. 

Więc jeśli znasz wysokość płótna w pikselach, a wysokość sześcian w pikselach jest 0,60 razy większy od tej wartości.

Podany link pokazuje, jak obliczyć szerokość widoczną, aby można było wykonać to obliczenie w podobny sposób, jeśli jest to potrzebne.