Exploración básica de Three.js II: cámara de proyección ortográfica

1. Cámara

La cámara en los gráficos define la forma de proyectar el espacio tridimensional sobre la pantalla bidimensional.

Las cámaras se dividen en cámaras de proyección ortográfica y cámaras de proyección en perspectiva.

2. Diferencia y ámbito de aplicación de los dos tipos de cámaras

Proyección ortográfica:

Proyección en perspectiva:

Proyección ortográfica Es como una clase de matemáticas. El dibujo en la proyección en perspectiva tiene un punto básico, es decir, los objetos distantes son más pequeños que los objetos cercanos y los objetos distantes son más pequeños que los objetos cercanos.

La proyección ortográfica se usa comúnmente en software de dibujo y modelado; la proyección en perspectiva se usa comúnmente en la mayoría de las otras aplicaciones.

3. Cámara de proyección ortográfica

El constructor de la cámara de proyección ortográfica:

3. Indica las posiciones de los seis rostros captados por la cámara de proyección ortográfica.

Entre ellos, cerca representa la distancia vertical entre el plano cercano y el centro de la cámara; lejos representa la distancia vertical entre el plano lejano y el centro de la cámara.

Fuente de la imagen

Para mantener la relación de aspecto de la cámara, las relaciones (derecha-izquierda) y (arriba-abajo) deben coincidir con la relación de aspecto del lienzo.

Como puedes ver en la imagen, los valores de cerca y lejos deben ser números positivos, lejos > cerca. Si los dos últimos valores son (0,0), es decir, cerca y lejos son iguales, entonces la profundidad de la ventana gráfica no existe y toda la ventana gráfica quedará aplastada en una superficie plana, lo que provocará un error.

4. Ejemplo de cámara de proyección ortográfica

Código fuente:

Consulte el primer artículo para obtener comentarios detallados.

Entre ellos, la propiedad w****ireframe de THREE.MeshBasicMaterial representa el material como una estructura alámbrica cuando es verdadera.

Puedes ver que el borde detrás de la posición actual se superpondrá completamente al borde en frente:

4.1 Cambiar la relación de aspecto del cuerpo de la vista

El lienzo Aquí la relación de aspecto es 4:3, la distancia horizontal de la cámara es 4 y la distancia vertical es 3, por lo que la relación de aspecto sigue siendo la misma (1:1).

Si reduce la distancia horizontal de la cámara a 2,

el objeto se estirará:

El campo de visión de la cámara se vuelve más estrecho, provocando que el cuadrado para que parezca más pequeño en el campo de visión. La proporción horizontal aumenta, por lo que el cuadrado parece más ancho.

4.2 Cambiar la posición de la cámara

La posición de la cámara en el ejemplo es (0,0,5), ya que la cámara está colocada hacia la dirección negativa del eje Z de forma predeterminada. , el cuadrado en el origen es visible.

Mueve la posición de la cámara 1 unidad hacia la derecha:

La cámara está mirando al sujeto, por lo que la cámara se mueve hacia la derecha y el sujeto se mueve hacia la izquierda:

4.3 Cambiar la posición del visor

Ajusta el visor más a la derecha:

Igual que mover la cámara hacia la derecha.

4.4 Cambiando el ángulo de la cámara

Pero ahora la cámara mira en la dirección negativa a lo largo del eje Z, por lo que no puede ver el cuadrado, solo el negro. Podemos usar la función lookAt para especificar que la cámara mira a lo largo del origen:

Tenga en cuenta que la función lookAt acepta una instancia de THREE.Vector3, no escriba camera.lookAt(0,0,0) .