Argumentos de la cámara en Three.js

Solución:

Me preguntaba lo mismo, así que lo busqué, es una vista. “tronco”.

Pegaré aquí un comentario de código que escribí en un proyecto reciente porque lo resume muy bien en mi humilde opinión.

// "What the f*** is a frustum?" you ask. Well I did.
// Think about it as a truncated pyramid. The tip is the camera. From a certain
// point "down" the pyramid (the "near plane"), stuff can be seen on-screen.
// After the "base" of the pyramid (the "far plane"), stuff is too far to be
// seen. Stuff outside the pyramid is off-screen too. There is also the "aspect
// ratio" (the rectangle that makes up the pyramid's base, so this value is
// width/height) and the "field of view" (think of it as a lens or something,
// it distorts the pyramid so there's more objects on screen - it is set in
// degrees and 45° is more-or-less a "natural" perspective. The bigger the
// number, the more "perspective" there is).

El primer parámetro es FOV significa campo de visión, imagina una cámara en un trípode, si cambias la lente a gran angular obtienes un FOV más alto. Intente imaginar un cono saliendo de la cámara, solo puede ver objetos en esa área.

ASPECTO significa relación de aspecto, un televisor de pantalla ancha es 16/9 y los antiguos eran 4/3, por lo general solo dale el ancho / alto de la pantalla o la atenuación de un DIV que te gustaría que use three.js.

Encontré este tutorial muy útil para comprender todos los parámetros de la cámara y la diferencia entre PerspectiveCamera y OrthographicCamera.

PerspectivaCámara

• Fov (campo de visión): esta es parte de la escena que se puede ver desde la posición de la cámara. Como probablemente sepa, nosotros, los humanos, tenemos un campo de visión de casi 180 grados, mientras que algunas aves incluso pueden tener un campo de visión completo de 360 ​​grados. Sin embargo, para las computadoras, usualmente usamos el campo de visión entre 60 y 90 grados.

• Aspecto: la relación de aspecto es la relación entre el tamaño horizontal y vertical del área donde renderizamos la salida. Como usualmente usamos toda la ventana, solo usaremos esa proporción. La relación de aspecto determina la diferencia entre el campo de visión horizontal y el campo de visión vertical, como puede ver en la figura de la página siguiente. El valor ordinario es window.innerWidth / window.innerHeight.

• Cerca: esta propiedad define una distancia mínima de la cámara Three.js renderiza la escena. Por lo general, este es un valor muy pequeño, por ejemplo, 0,1.

• Lejos: esta propiedad define una distancia máxima a la que vemos la escena desde la posición de la cámara. Si configuramos esto como demasiado bajo, es posible que una parte de nuestra escena no se renderice; si lo configuramos como demasiado alto, en algunos casos, podría afectar el rendimiento del renderizado. El valor normal está entre 500 y 2000.

Cámara ortográfica

• Izquierda (plano izquierdo de la cámara frustum): debería ver esto como el borde izquierdo de lo que se renderizará. Si establecemos este valor en -100, no verá ningún objeto que esté más a la izquierda.

• Derecha (plano derecho de la cámara frustum): no se renderizará nada más a la derecha.

• Superior (plano superior del tronco de la cámara): la posición superior máxima que se va a representar.

• Inferior (plano inferior del tronco de la cámara) La posición inferior que se va a renderizar.

• Cerca (cámara frustum cerca del plano): a partir de este punto, en función de la posición de la cámara, se renderizará la escena.

• Lejos (plano lejano de la cámara frustum): el punto más lejano, según la posición de la cámara, en el que se renderizará la escena.

La siguiente imagen debería ser muy ilustrativa:

La principal diferencia entre los dos modos de cámara es que en el OrthographicCamera la distancia no juega ningún papel, por lo que todos los elementos son del mismo tamaño, como se puede ver en el caso de la bola roja y amarilla.

Finalmente, aquí hay un código que puede usar para cambiar de una cámara a otra:

this.switchCamera = function(SCENE_WIDTH, SCENE_HEIGHT) {
  if (camera instanceof THREE.PerspectiveCamera) {
    camera = new THREE.OrthographicCamera( SCENE_WIDTH / - 2, SCENE_WIDTH / 2, SCENE_HEIGHT / 2, SCENE_HEIGHT / - 2, 0.1, 1000 );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = -1;
    camera.lookAt(scene.position);
    this.perspective = "Orthographic";
  } else {
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = -1;
    camera.lookAt(scene.position);
    this.perspective = "Perspective";
  }
};

Notas:

• La función camera.lookAt(scene.position) orienta la cámara hacia el lugar donde se encuentra la escena, para que sea visible.
• Unidades en three.js son unidades SI, por lo que los valores de left,right,top,bottom no debe se supone que son píxeles.
• La relación de aspecto del tronco de la cámara normalmente debería coincidir con la relación de aspecto del lienzo.
• SCENE_WIDTH, SCENE_HEIGHT, se puede determinar a través de las geometrías que se agregan en la escena. El tronco ortográfico podría ser mucho más grande que la escena, pero no sería muy parsimonioso.

Enlaces útiles:

• http://www.glprogramming.com/red/chapter03.html
• Three.js – Cámara ortográfica

---

---

Utiliza Nuestro Buscador