javascript - change - title css

Cómo ajustar la cámara al objeto

Question

Usando three.js tengo lo siguiente.

• Una escena que contiene varias instancias de Object3D
• Varias posiciones predefinidas de la cámara Vector3
• Un ancho / alto dinámico del lienzo si la pantalla cambia de tamaño
• Un usuario puede seleccionar un objeto (desde arriba)
• Un usuario puede seleccionar una posición de cámara (desde arriba)

Dado un objeto que se está viendo y la posición de la cámara que han elegido, ¿cómo calculo la posición final de la cámara para "ajustar mejor" el objeto en la pantalla?

Si las posiciones de la cámara se usan "tal cual" en alguna pantalla, los objetos sangran sobre el borde de mi ventana mientras que otros parecen más pequeños. Creo que es posible ajustar el objeto a la cámara triturada, pero no hemos podido encontrar nada adecuado.

Answer 1

Desde la sugerencia de user151496 sobre el uso de la relación de aspecto, esto parece funcionar, aunque solo he probado con algunos conjuntos de parámetros diferentes.

var maxDim = Math.max(w, h);
var aspectRatio = w / h;        
var distance = maxDim/ 2 /  aspectRatio / Math.tan(Math.PI * fov / 360);

Answer 2

Para calcular qué tan lejos colocar su cámara para ajustar un objeto a la pantalla, puede usar esta fórmula (en Javascript):

// Convert camera fov degrees to radians
var fov = camera.fov * ( Math.PI / 180 ); 

// Calculate the camera distance
var distance = Math.abs( objectSize / Math.sin( fov / 2 ) );

Donde objectSize es la altura o el ancho del objeto. Para objetos de cubo / esfera puede usar el alto o el ancho. Para un objeto no cubo / no esfera, donde la longitud o el ancho es mayor, use var objectSize = Math.max( width, height ) para obtener el valor más grande.

Tenga en cuenta que si la posición del objeto no está en 0, 0, 0 , necesita ajustar la posición de la cámara para incluir el desplazamiento.

Aquí hay un CodePen que muestra esto en acción. Las líneas relevantes:

var fov = cameraFov * ( Math.PI / 180 );
var objectSize = 0.6 + ( 0.5 * Math.sin( Date.now() * 0.001 ) );

var cameraPosition = new THREE.Vector3(
    0,
    sphereMesh.position.y + Math.abs( objectSize / Math.sin( fov / 2 ) ),
    0
);

Puedes ver que si agarras el asa de la ventana y la cambias de tamaño, la esfera aún ocupa el 100% de la altura de la pantalla. Además, el objeto se escala hacia arriba y hacia abajo en forma de onda sinusoidal ( 0.6 + ( 0.5 * Math.sin( Date.now() * 0.001 ) ) ), para mostrar que la posición de la cámara tiene en cuenta la escala del objeto.

Answer 3

Según WestLangleys, la respuesta aquí es cómo calcula la distancia con un campo de visión de cámara fijo:

dist = height / 2 / Math.tan(Math.PI * fov / 360);

Answer 4

Supongo que estás usando una cámara en perspectiva.

Puede establecer la posición de la cámara, el campo de visión o ambos.

El siguiente cálculo es exacto para un objeto que es un cubo, por lo tanto, piense en términos del cuadro delimitador del objeto, alineado para hacer frente a la cámara.

Si la cámara está centrada y observa el cubo de frente, defina

dist = distance from the camera to the _closest face_ of the cube

y

height = height of the cube.

Si configura el campo de visión de la cámara de la siguiente manera

fov = 2 * Math.atan( height / ( 2 * dist ) ) * ( 180 / Math.PI ); // in degrees

entonces la altura del cubo coincidirá con la altura visible.

En este punto, puede retroceder un poco la cámara o aumentar un poco el campo de visión.

Si el campo de vista es fijo, entonces usa la ecuación anterior para resolver la distancia.

EDITAR: si desea que el width del cubo coincida con el ancho visible, deje que el aspect sea ​​la relación de aspecto del lienzo (ancho del lienzo dividido por altura del lienzo) y configure el campo de visión de la cámara como tal

fov = 2 * Math.atan( ( width / aspect ) / ( 2 * dist ) ) * ( 180 / Math.PI ); // in degrees

three.js r.69