javascript - snapseed - Three.js-Cámara ortográfica

mejor aplicacion para editar fotos android

Question

He estado trabajando en una aplicación que muestra algunos modelos en 3D. Cargamos los modelos, creamos las mallas, las agregamos a la escena ... procedimiento estándar. Después de agregar la última malla, calculamos el cuadro delimitador para mover la cámara y cubrir toda la escena, usando el tamaño de la geometría total y el tamaño de la ventana gráfica para realizar los cálculos.

 if (bounds.bx / bounds.by < camera.aspect) {
/* Vertical max */
r = bounds.by / (2 * Math.tan(Math.PI / 8));
} else {
/* Horizontal max */
hFOV = 2 * Math.atan(Math.tan(Math.PI / 8) * camera.aspect);
r = bounds.bx / (2 * Math.tan((hFOV / 2)));
}

bounds es un objeto que contiene el ancho y alto del cuadro delimitador. Después de este cálculo, movemos la cámara (más una pequeña proporción, solo estética, queremos un espacio pequeño entre la geometría y el borde de la pantalla :)) y renderizamos

 camera.position.z = r * 1.05;

Hasta ahora esto está implementado y funciona bien. Esto se ha hecho con PerspectiveCamera. Ahora queremos cambiar eso y usar OrthographicCamera ... resulta ser un desastre. Los modelos son demasiado pequeños, perdemos el zoom de la rueda del mouse desde los Controles TrackBall y el algoritmo para mover la cámara ya no funciona. Además, no entiendo los parámetros del constructor para la cámara ... ¿este ancho y alto son para la geometría o la ventana gráfica?

Answer 1

 camera.top = (.95*camera.top);
camera.bottom = (.95*camera.bottom);
camera.left = (.95*camera.left);
camera.right = (.95*camera.right);

Answer 2

Para futuras referencias: buen video de 5 minutos

var w = container.clientWidth;
var h = container.clientHeight;
var viewSize = h;
var aspectRatio = w / h;
_viewport = {
viewSize: viewSize,
aspectRatio: aspectRatio,
left: (-aspectRatio * viewSize) / 2,
right: (aspectRatio * viewSize) / 2,
top: viewSize / 2,
bottom: -viewSize / 2,
near: -100,
far: 100
}
_camera = new THREE.OrthographicCamera (
_viewport.left,
_viewport.right,
_viewport.top,
_viewport.bottom,
_viewport.near,
_viewport.far
);

Answer 3

El patrón para instanciar una cámara ortográfica en three.js es:

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, near, far );

donde el width y la height son el ancho y la altura del tronco truncado en forma de cuboide de la cámara medido en unidades de espacio-mundo .

near y far están las distancias del espacio y el mundo a los planos cercanos y lejanos del tronco. Tanto near como far deberían ser mayores que cero.

Para evitar la distorsión, normalmente querrá que la relación de aspecto de la cámara ortográfica ( width / height ) coincida con la relación de aspecto del lienzo del renderizado. (vea la nota abajo)

Es desafortunado que muchos de los ejemplos de window.innerWidth pasen window.innerWidth y window.innerHeight como args a este constructor. Hacerlo solo tiene sentido si la cámara ortográfica se usa para representar una textura, o si las unidades del mundo para su escena ortográfica están en píxeles.

* Nota: en realidad, la relación de aspecto de la cámara debe coincidir con la relación de aspecto de la ventana gráfica del renderizador. La ventana gráfica puede ser una subregión del lienzo. Si no configura la ventana gráfica del renderizador directamente usando renderer.setViewport() , la ventana gráfica tendrá el mismo tamaño que el lienzo y, por lo tanto, tendrá la misma relación de aspecto que el lienzo.

three.js r.73