introducción
Este artículo explica principalmente los conceptos relevantes de tres.js y ayuda a los lectores a desarrollar una comprensión relativamente completa de tres.js y conocimientos relacionados.
La web se ha desarrollado rápidamente en los últimos años. Con la popularidad de HTML5, las capacidades de rendimiento de las páginas web se están volviendo cada vez más poderosas. Ya hay muchas animaciones complejas y efectos exquisitos en la página web.
Pero la gente siempre es codiciosa. Entonces, ¿qué más se puede hacer por encima de esto? Uno de ellos es dibujar gráficos 3D de alto rendimiento en páginas web a través de WebGL.
OpenGL, WebGL a tres.js
Muchas personas probablemente escucharon sobre OpenGL , que es la biblioteca de gráficos multiplataforma más utilizado.
WebGL es un estándar de gráficos orientado a la web diseñado por OpenGL, que proporciona una serie de API de JavaScript a través de las cuales la representación de gráficos se aprovechará para lograr un mayor rendimiento.
Three.js es una biblioteca de gráficos fácil de usar formada por encapsulación y simplificación de la interfaz WebGL.
En pocas palabras: WebGL puede considerarse como una interfaz proporcionada por el navegador. En JavaScript, estas API se pueden usar directamente para dibujar gráficos 3D; y tres.js nos ayuda a encapsular estas interfaces para que sean más útiles.
Comparación de WebGL y tres.js
Como tenemos WebGL, ¿por qué todavía necesitamos tres.js?
Esto se debe a que el umbral para WebGL es relativamente alto y requiere un conocimiento relativamente más matemático. Aunque WebGL proporciona una API front-end, WebGL y el desarrollo frontal son esencialmente dos direcciones diferentes, y hay poca superposición de conocimiento. La relevancia es que todos están en la plataforma web y todos usan JavaScript. Un programador front-end puede estar familiarizado con la geometría analítica, pero debe haber muy pocos que todavía estén familiarizados con el álgebra lineal (por ejemplo, tratar de encontrar una matriz de transposición inversa?), Sin mencionar que la importancia física de las operaciones de la matriz se enfatiza en uso, que también falta relativamente en la enseñanza.
Por lo tanto, es bastante difícil para los ingenieros frontales comenzar con WebGL en poco tiempo.
Por lo tanto, tres.js tiene muy buena encapsulación de la interfaz proporcionada por WebGL, simplificando muchos detalles y reduciendo en gran medida los costos de aprendizaje. Y, hay poca pérdida de flexibilidad en WebGL.
Por lo tanto, vale la pena comenzar con tres.js, lo que le permite enfrentar la mayoría de los escenarios de demanda después de un estudio más corto.
Tres.js problemas de aprendizaje
Comenzar con tres.js es relativamente simple, pero cuando realmente aprendamos, encontraremos un problema vergonzoso: hay muy pocos materiales de aprendizaje relacionados.
Por lo general, esta biblioteca popular tiene documentos muy completos y, a menudo, la mejor manera de aprender de documentos oficiales o tutoriales introductorios oficiales. Pero tres no, su documentación es demasiado concisa para los principiantes.
Sin embargo, el funcionario proporciona una variedad muy rica de ejemplos, y casi todos los usos que necesita se reflejan en un cierto ejemplo. Pero estos ejemplos no son adecuados para comenzar, pero son adecuados para un mayor aprendizaje después de comenzar.
Aquí hay algunos tutoriales relativamente buenos:
Guía de inicio de tres.js
Este es un buen tutorial introductorio liviano para tres.js. El autor tiene un muy buen estilo de escritura y el conocimiento básico se explica de manera concisa y fácil de entender.
Guía de desarrollo de tres.js (primera versión china)
Aprendiendo tres.js- Segunda edición
Learning Three.js: La Biblioteca 3D JavaScript para WebGL es el libro de los pocos y mejores introductorio de tres.js, que explica las diversas funciones de tres.js de una manera más completa .
Si tiene la capacidad, se recomienda leer la segunda edición de la versión en inglés, publicada en 2015, que es muy pequeña diferente de los tres.js actuales.
La versión china se traduce de la primera edición del libro original publicado en 2012. La mayoría de los conceptos son aplicables, pero muchos detalles han cambiado.
Tutorial de tres.js
Esta es una traducción de un tutorial extranjero, con un total de seis artículos . No explico mucho, pero se trata más de cómo usar cada función básica. Es más adecuado para estudiantes con algunas bases gráficas.
Por supuesto, estos materiales definitivamente no son suficientes durante el proceso de aprendizaje real. Al encontrar problemas, aún tiene que verificar los materiales usted mismo. Sin embargo, me gustaría recordarle que tres.js se actualiza con bastante frecuencia, ahora es la versión R80. Desde que R1 se lanzó en abril de 2010, esta es la versión 72 (se han omitido algunos números de versión en el medio). Por lo tanto, parte de la información que se encuentra en Internet puede no ser adecuada para la versión actual , por lo que debe prestar atención a la identificación (la información recomendada anteriormente también tiene más o menos problemas).
Algunos conceptos en tres.js
Para mostrar gráficos 3D en la pantalla, la idea generalmente es así:
Construir un espacio tridimensional
En tres, se llama escena (escena) para seleccionar un punto de observación y determinar la dirección/ángulo de observación, etc.
Tres lo llaman la cámara (cámara) para agregar objetos para observar a la escena
Hay muchos tipos de objetos en tres, incluidos la malla, la línea, los puntos, etc. Todos heredan de la clase Object3D provoca la escena observada a un área especificada en la pantalla.
Use Renderer en tres para hacer esto
Echemos un vistazo a estos conceptos en tres en detalle.
Escena
La escena es un contenedor de todos los objetos, y también corresponde al mundo tridimensional que creamos.
Sistema de coordenadas de cámara
La cámara es un observador en el mundo tridimensional. Para observar este mundo, primero debemos describir la posición en el espacio.
El sistema de coordenadas de mano derecha común se usa en tres.
Proyección tridimensional
Hay dos tipos de cámaras en tres, a saber, la cámara de proyección ortográfica tres. Cámaras artográficas y la cámara de proyección de perspectiva tres. Cámara de perspectiva.
La diferencia entre la proyección ortogonal y la proyección de perspectiva se muestra en la figura anterior. La imagen izquierda es una proyección ortogonal. La luz emitida por el objeto se proyecta paralela a la pantalla, y los cuadrados de lejos y cerca son del mismo tamaño; La imagen correcta es una proyección en perspectiva, que es grande en el cercano y pequeño en el lejano y pequeño, que está en línea con nuestra sensación habitual de mirar las cosas.
Wikipedia: proyección 3D
Cámara de proyección ortogonal
Nota: El "punto de vista" en la figura corresponde a la cámara en tres.
Aquí agregamos un concepto de cuerpo visual: el cuerpo visual es un cuerpo geométrico, solo los objetos en el cuerpo visual serán vistos por nosotros, y los objetos fuera del cuerpo visual serán cortados. Esto es para eliminar operaciones innecesarias.
El cuerpo de la vista de la cámara de proyección ortográfica es un cuboide. El constructor de ortográficacamera es el siguiente: ortográficacamera (izquierda, derecha, arriba, abajo, cerca, lejos)
La cámara en sí puede considerarse como un punto, mientras que la izquierda indica la distancia entre el plano izquierdo y la cámara en la dirección izquierda y derecha. Lo mismo se aplica a los otros parámetros. Por lo tanto, los seis parámetros definen las posiciones de las seis caras del cuerpo de visualización respectivamente.
Se puede suponer aproximadamente que los objetos en el cuerpo de visión se proyectan paralelos al plano cercano, y luego las imágenes en el plano cercano se renderizan en la pantalla.
Cámara de proyección de perspectiva
El cuerpo de visualización de la cámara de proyección de perspectiva es una plataforma de cuatro borde, y su constructor es el siguiente: Perspectivecamera (FOV, Aspect, Near, Far)
FOV corresponde a la perspectiva en la figura, que es el ángulo entre los lados superiores e inferiores. El aspecto es la relación de aspecto del plano cercano. Agregar la distancia cerca del plano cerca y la distancia del plano lejano lejos, la única forma de determinar la escena visual.
Las cámaras de proyección de perspectiva son muy consistentes con nuestra sensación habitual de ver cosas, por lo que en la mayoría de los casos usamos cámaras de proyección de perspectiva para mostrar efectos 3D.
Objetos
Con una cámara, tienes que mirar algo, ¿verdad? Agregue algunos objetos a la escena.
Hay muchos objetos para mostrar en tres, todos los cuales se heredan de la clase Object3D. Aquí miramos principalmente malla y puntos.
Malla
Todos sabemos que en el mundo de las computadoras, un arco está conectado por un segmento de línea finita compuesto por puntos finitos. Cuando hay muchas líneas, parece un arco suave.
El modelo tridimensional en las computadoras es similar. La práctica común es describirlo usando una cuadrícula de triángulos. Llamamos a este modelo el modelo de malla.
Este es el famoso conejo Stanford. Su posición en gráficos 3D es similar a la de Lena, un campo bien conocido de procesamiento de imágenes digitales.
Mire este conejo, a medida que aumenta el número de triángulos, su superficie se vuelve más suave/precisa.
En tres, el constructor de malla es el siguiente: malla (geometría, material)
La geometría es su forma, el material es su material.
No solo malla, estas dos propiedades se utilizan para crear muchos objetos. Echemos un vistazo a estos dos atributos importantes.
Geometría
La geometría, la forma, es bastante intuitiva. La geometría utiliza el modelo para almacenar el conjunto de puntos y la relación entre los puntos (que los puntos forman un triángulo) para lograr el propósito de describir la forma de un objeto.
Tres proporciona muchas formas básicas, como cubos (en realidad cuboides), aviones (en realidad rectángulos), esferas, círculos, cilindros y tablas redondas;
También puede construir formas definiendo la posición de cada punto usted mismo;
Para formas más complejas, también podemos importarlas a través de archivos de modelo externos.
Material
Material, material, esto no es tan intuitivo como la forma.
El material es en realidad una colección de todos los atributos visuales, excepto la forma de la superficie del objeto, como el color, la textura, la suavidad, la transparencia, la reflectividad, el índice de refracción y la luminosidad.
Aquí hablaremos sobre la relación entre material, mapa y textura.
El material se ha mencionado anteriormente, e incluye mapas y otros.
Las pegatinas son en realidad 'pegar' y 'pegar', que incluye las imágenes y donde se deben publicar las imágenes.
En cuanto a la textura, en realidad es una 'imagen'.
Tres ofrece una variedad de materiales para elegir, y pueden elegir libremente la reflexión difusa/especular y otros materiales.
Agujas
Después de hablar de malla, echemos un vistazo a otro objeto: puntos.
Los puntos son en realidad una colección de un montón de puntos. Se llamó partículas del sistema durante mucho tiempo antes. Fue renombrado PointCloud en la versión R68, y se renombró puntos en la versión R72. El cambio de nombre se debe principalmente a que Mr.Doob cree que los sistemas de partículas deberían ser un sistema completo que incluye el procesamiento de partículas y las propiedades físicas relacionadas, mientras que los puntos en tres son mucho más simples. Entonces, eventualmente, esta clase se nombra puntos.
El efecto típico que los puntos se pueden usar para lograr es este: ejemplo oficial
Luz
Dios dijo: ¡Debe haber luz!
El efecto de luz y sombra es un factor importante que enriquece la imagen.
Tres proporciona una variedad de fuentes de luz que incluyen luz ambiental ambiente, luz ambiental, luz de punto de la fuente de luz, foco de atención, luz direccional de dirección, luz de hemisferio del hemisferio y otra luz.
Simplemente agregue la fuente de luz requerida a la escena.
Renderizador
Varios objetos están construidos en la escena, la luz y las cámaras que observan objetos, es hora de representar lo que ves en la pantalla. Eso es lo que hace.
Renderer une un objeto de lienzo y puede establecer propiedades como tamaño, color de fondo predeterminado, etc.
Llame a la función de renderizado de Renderer, pase en la escena y la cámara, y puede convertir la imagen en lienzo.
Hacer que la imagen se mueva
Ahora, se puede obtener una imagen estática, ¿cómo puede moverse?
Una idea muy simple es cambiar la posición, el ángulo y las diversas propiedades del objeto en la escena, y luego llamar a la función de renderizado para renderizar.
Entonces, ¿cómo se determina el momento del reenvío?
HTML5 nos proporciona requestAnimframe, que llama automáticamente la función aprobada antes de cada página de repintado.
Si lo representamos al principio:
function render () {renderer.render (escena, cámara);}Solo cámbielo a esto:
function render () {requestAnimationFrame (render); object.position.x += 1; renderer.render (escena, cámara);}¡El objeto puede moverse!
Dar una castaña
Usemos un ejemplo simple para resolver este proceso.
Primero, escriba una página con elementos de lona.
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> Cube </title> <script src = "http://sqimg.qqq.com/qq_product_operations/mma/Javanli_test/lib/three.min.js"> </script> <script> <syle teax html, cuerpo {margen: 0; relleno: 0; } #Three_Canvas {posición: Absolute; Ancho: 100%; Altura: 100%; } </style> </head> <body> <Canvas id = "tres_canvas"> </ Canvas> </body> </html>Hagamos la parte de JavaScript a continuación
Primero inicializar Renderer
function initrenderer () {width = document.getElementById ('tres_canvas'). ClientWidth; altura = document.getElementById ('tres_canvas'). ClientHeight; renderer = new Three.webglrenderer ({// Bind Canvas a Renderer Canvas: document.getElementById ('tres_canvas')}); renderer.setsize (ancho, altura); // Establezca el tamaño de renderizado en el mismo que Canvas Renderer.setCleArcolor (0xffffff, 1.0); // Establezca el color y la transparencia predeterminados}Escenario de inicialización:
función initscene () {escena = new tres.scene ();}Inicializar la cámara:
Función InitCamera () {// cámara de proyección ortogonal simple, frente al centro de la ventana gráfica, el tamaño de la ventana gráfica es el mismo que el tamaño del lienzo. cámara = nuevo tres.tográficocamera (ancho / -2, ancho / 2, altura / 2, altura / -2, 1, 1000); // Establecer la posición de la cámara Camera.Position.x = 0; Camera.Position.y = 0; Camera.Position.z = 200; // Establecer la dirección de dirección ascendente de la cámara.up.x = 0; cámara.up.y = 1; cámara.up.z = 0; // Establezca la posición de enfoque de la cámara (en realidad para determinar una dirección) Camera.lookat ({x: 0, y: 0, z: 0});}Para determinar de manera única la posición y la dirección de una cámara, los tres atributos de posición, arriba y lookat son indispensables.
Aquí hemos creado una cámara de proyección ortogonal. Aquí mantengo el tamaño de la vista consistente con la resolución de la pantalla solo para conveniencia, de modo que una longitud de unidad en el sistema de coordenadas corresponde a un píxel de la pantalla.
Colocamos la cámara en el eje Z, frente al origen de la coordenada, y la dirección superior de la cámara es el eje Y. Tenga en cuenta que la dirección de UP y la dirección de Lookat debe ser perpendicular (sabrá si se compara con su propia cabeza).
Aquí hay un cubo agregado a la escena:
función initobject () {// Crear un cubo con una longitud lateral de 100 var geometry = new Thre.CubeGeometry (100, 100, 100); objeto = nuevo tres.mesh (geometría, nuevo tres.MeshNormalMaterial ()); escena.add (objeto);}Tenga en cuenta que usamos el material normal MeshnormalMaterial , de modo que el color de cada cara del cubo está relacionado con la dirección que enfrenta esta cara, lo que facilita la observación/depuración.
En esta simple demostración, no planeo agregar efectos de luz y sombra, y el material normal no responde a la luz.
Finalmente, crea un bucle de animación
function render () {requestAnimationFrame (render); object.rotation.x += 0.05; object.rotation.y += 0.05; renderer.render (escena, cámara);}Cada repinte hace que el cubo gire un poco.
Cuando la página se está cargando, simplemente llame a las funciones anteriores
function ThreeStart () {initRenderer (); initCamera (); initscene (); initObject (); render ();} window.Onload = ThreeStart ();La demostración completa se ve así:
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> Cube </title> <script src = "http://sqimg.qqq.com/qq_product_operations/mma/Javanli_test/lib/three.min.js"> </script> <script> <syle teax html, cuerpo {margen: 0; relleno: 0; } #Three_Canvas {posición: Absolute; Ancho: 100%; Altura: 100%; } </style> </head> <body> <Canvas id = "tres_canvas"> </ Canvas> <Script> var renderer, cámara, escena, luz, objeto; ancho de var, altura; function initrenderer () {width = document.getElementById ('tres_canvas'). ClientWidth; altura = document.getElementById ('tres_canvas'). ClientHeight; renderer = new Three.webglrenderer ({Canvas: document.getElementById ('tres_canvas')}); renderer.setsize (ancho, altura); renderer.setClearColor (0xffffff, 1.0); } function initCamera () {cámara = nuevo tres.othográficoCamera (ancho / -2, ancho / 2, altura / 2, altura / -2, 1, 1000); cámara.position.x = 0; Camera.Position.y = 0; Camera.Position.z = 200; cámara.up.x = 0; cámara.up.y = 1; cámara.up.z = 0; Camera.lookat ({x: 0, y: 0, z: 0}); } function initsCene () {escena = new Three.scene (); } función initobject () {var geometry = new Three.CubeGeometry (100, 100, 100); objeto = nuevo tres.mesh (geometría, nuevo tres.MeshNormalMaterial ()); escena.add (objeto); } function render () {requestAnimationFrame (render); object.rotation.x += 0.05; object.rotation.y += 0.05; renderer.render (escena, cámara); } function ThreeStart () {initrenderer (); initCamera (); initscene (); initObject (); prestar(); } window.Onload = ThreeStart (); </script> </body> </html>Después de guardar como HTML, ábralo, se mostrará un cubo giratorio en el centro de la pantalla.
resumen
Eso es todo para la introducción de tres.js. Este artículo básicamente menciona componentes importantes en tres. De hecho, hay muchas cosas que quiero resumir, pero escribirlas en este artículo puede parecer engorroso. La intención original de este artículo es permitir que los lectores tengan una comprensión intuitiva y general de tres.js después de leerlo, y no tienen la intención de involucrar demasiados detalles.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.