Prefacio
Three.js es una biblioteca 3DJS, uno de los marcos de código abierto de WebGL más excelentes. Además de WebGL, Three.js también proporciona un renderizador basado en el lienzo y las etiquetas SVG. Se recomienda usar Chrome o Firefox para la depuración.
1. Cámara
La cámara en gráficos define cómo se proyectan el espacio tridimensional para las pantallas bidimensionales.
Para los métodos de proyección, las cámaras se dividen en cámaras de proyección ortogonales y cámaras de proyección de perspectiva.
2. La diferencia y el alcance de la aplicación de las dos cámaras
Proyección ortogonal:
Proyección de perspectiva:
La proyección ortogonal es como una foto en la clase de matemáticas; Si bien la proyección de la perspectiva tiene un punto básico, es decir, los objetos en la distancia son más pequeños que los objetos de cerca y son más grandes y más pequeños en los cercanos.
Para el software de dibujo y modelado, la proyección ortogonal generalmente se usa; Para la mayoría de las otras aplicaciones, la proyección de perspectiva generalmente se usa.
3. Cámara de proyección ortogonal
El constructor de una cámara de proyección ortogonal:
Tres.tográficoscamera (izquierda, derecha, arriba, abajo, cerca, lejos)
Los seis parámetros representan las posiciones de las seis caras capturadas por la cámara de proyección ortogonal.
Entre ellos, Near representa la distancia vertical entre el plano cercano y el punto central de la cámara ; Far representa la distancia vertical entre el plano lejano y el punto central de la cámara .
Para mantener la relación horizontal y vertical de la cámara , la relación de (derecha-izquierda) a (fondo superior) debe ser consistente con la relación de aspecto de lienzo.
Como se puede ver en la figura, los valores de cerca y lejos deberían ser positivos y lejos . Si los dos últimos valores son (0, 0), es decir, los valores cercanos y lejanos son los mismos, la profundidad del cuerpo de visión desaparece y todo el cuerpo de visión se presiona en un plano, la pantalla será incorrecta.
4. Ejemplo de cámara de proyección ortogonal
Código fuente:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"><title>3.js test 2</title> </head> <body onload="init()"> <canvas id="mainCanvas" ></canvas> <script type="text/javascript" src="js/three.min.js"></script> <script type = "text/javascript"> function init () {var renderer = new tres.webglrenderer ({canvas: document.getElementById ('maincanvas')}); renderer.setClearColor (0x0000000); VAR Scene = new Three.scene (); // Configure la cámara VAR Camera = nuevo tres. Cacamera de Otográfica (-2, 2, 1.5, -1.5, 1, 10); Camera.Position.set (0, 0, 5); //camera.lookat(new tres.vector3 (0, 0, 0)); escena.add (cámara); // Crear un cubo var cube = nuevo tres.mesh (nuevo tres.cubeGeometry (1, 1, 1), nuevo tres.MeshBasicMaterial ({color: 0xff0000, wireframe: true})); escena.add (cubo); // render renderer.render (escena, cámara); } </script> </body> </html> Donde, si la propiedad de la estructura alambre THREE.MeshBasicMaterial es verdadera , el material se convertirá en una estructura alámbrica.
Puede ver que el borde detrás de la posición actual coincidirá completamente con el delantero:
4.1 Cambiar la relación de longitud y ancho de la vista
Aquí, la relación de aspecto del lienzo 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 longitud y ancho permanece sin cambios (1: 1).
Si la distancia horizontal de la cámara se reduce a 2,
VAR CAMERA = nuevo tres.tográficocamera (-1,1,1.5, -1.5,1,10);
Los objetos se alargarán:
El campo de visión de la cámara se ha vuelto más estrecho, lo que resulta en un aumento en la proporción lateral del cubo dentro del campo de visión, que se manifiesta como una ampliación del cubo.
4.2 Cambiar la posición de la cámara
La posición de la cámara en el ejemplo es (0,0,5). Dado que la cámara se coloca en la dirección negativa del eje z de forma predeterminada, puede ver el cubo en el origen.
Mueva la posición de la cámara por 1 unidad hacia la derecha:
VAR CAMERA = nuevo tres.tográficocamera (-2,2,1.5, -1.5,1,10); Camera.Position.set (1,0,5);
La cámara mira el objeto, por lo que la cámara se mueve a la derecha y el objeto que se ilumina se mueve a la izquierda:
4.3 Cambiar la posición de la vista
Establezca la vista a la derecha:
VAR CAMERA = nueva tres. Cacamera de Otográfica (-1,3,1.5, -1.5,1,10); Camera.Position.set (1,0,5);
Al igual que mover la cámara correctamente.
4.4 Cambiar el ángulo de la cámara
Camera.Position.set (4, -3,5); Camera.lookat (nuevo tres.vector3 (0, 0, 0));
Pero ahora la cámara está observando a lo largo de la dirección negativa del eje z, por lo que no se puede observar el cubo, solo se ve un trozo de negro. Podemos especificar la dirección del origen a través de la función Lookat:
Camera.lookat (nuevo tres.vector3 (0, 0, 0));
Tenga en cuenta que lookAt acepta una instancia de THREE.Vector3 , no la escriba como camera.lookAt(0, 0, 0)
De acuerdo, lo anterior es todo el contenido de tres.js aprendizaje de la cámara de proyección ortogonal. Espero que sea útil para todos aprender tres.js. El editor actualizará artículos sobre tres.js uno tras otro. Continúe prestando atención a Wulin.com.