Share
Los gráficos 3D en el navegador han sido un tema candente desde que se introdujo por primera vez. Pero si tuviera que crear sus aplicaciones utilizando WebGL simple, llevaría mucho tiempo. Esta es exactamente la razón por la cual algunas bibliotecas realmente útiles han surgido recientemente. Three.js es uno de los más populares, y en esta serie te mostraré la mejor manera de usarlo para crear impresionantes experiencias 3D para tus usuarios..
Antes de comenzar, espero que tenga una comprensión básica del espacio 3D antes de comenzar a leer este tutorial, ya que no explicaré cosas como coordenadas, vectores, etc..
Primero, crea tres archivos: index.html, main.js y style.css. Ahora, descargue Three.js (archivo zip completo con ejemplos y fuente, o solo el archivo JavaScript, su elección). Ahora abierto index.html e inserte este código:
Eso es todo lo que necesitas en este archivo. Sólo una declaración de scripts y hojas de estilo. Toda la magia pasará en main.js, pero antes de llegar a eso necesitamos un truco más para que la aplicación se vea bien. Abierto style.css e inserte este código:
lienzo posición: fijo; arriba: 0; izquierda: 0;
Esto colocará el lienzo en la esquina superior izquierda, porque de forma predeterminada el cuerpo Tendrá 8px de margen. Ahora podemos proceder con el código JavaScript..
Three.js utiliza el concepto de una lista de visualización. Significa que todos los objetos se almacenan en la lista y luego se dibujan en la pantalla..
Three.js utiliza el concepto de una lista de visualización. Esto significa que todos los objetos se almacenan en la lista y luego se dibujan en la pantalla. Aquí, esto es un Tres. objeto. Debe agregar a la escena cualquier objeto que desee dibujar en la pantalla. Puede tener tantas escenas como desee, pero un renderizador solo puede dibujar una escena a la vez (por supuesto, puede cambiar la escena que se muestra).
El renderizador simplemente dibuja todo, desde la escena hasta el lienzo de WebGL. Three.js también admite el dibujo en SVG o 2D Canvas, pero nos centraremos en WebGL.
Para comenzar, almacenemos el ancho y el alto de la ventana en variables, lo usaremos más adelante:
var width = window.innerWidth; var height = window.innerHeight;
Ahora define el renderizador y la escena:
var renderer = new THREE.WebGLRenderer (antialias: true); renderer.setSize (ancho, alto); document.body.appendChild (renderer.domElement); var scene = new THREE.Scene;
La primera línea define el renderizador WebGL. Puede pasar las opciones del renderizador en el primer argumento como un mapa. Aquí, ponemos la antialias a verdadero, porque queremos que los bordes de los objetos sean lisos, no dentados.
La segunda línea establece el tamaño del renderizador al tamaño de la ventana, y en la tercera, agregamos el renderizador lona elemento del documento (también puede hacerlo utilizando una biblioteca, como jQuery: $ ('body'). append (renderer.domElement)).
El último define la escena, no se necesitan argumentos..
Ahora vamos a añadir algo para dibujar. Deja que sea un cubo, ya que es el objeto 3D más simple. En Three.js, los objetos que se dibujan en la pantalla se denominan mallas. Cada malla debe tener su propia geometría y material. La geometría es un conjunto de puntos que deben conectarse para crear el objeto. El material es simplemente la pintura (o pintura, pero ese no es el tema de este tutorial) que cubrirá el objeto. Entonces, vamos a crear nuestro cubo. Afortunadamente para nosotros, hay tres funciones de ayuda en Three.js para crear primitivas (formas simples):
var cubeGeometry = new THREE.CubeGeometry (100, 100, 100); var cubeMaterial = new THREE.MeshLambertMaterial (color: 0x1ec876); var cube = new THREE.Mesh (cubeGeometry, cubeMaterial); cube.rotation.y = Math.PI * 45/180; scene.add (cubo);
Como puedes ver, primero creamos la geometría. Los argumentos son definir un tamaño del cubo: el ancho, la altura y la profundidad.
A continuación, definimos el material del cubo. Hay algunos tipos de materiales en Three.js, pero esta vez usaremos el TRES.MeshLambertMaterial, ya que queremos tener algo de iluminación más tarde (este material utiliza el algoritmo de Lambert para cálculos de luz). Puede pasar las opciones en el primer argumento como un mapa, al igual que con el renderizador; esto es casi una regla para los objetos más complejos en Three.js. Aquí, solo usamos el color, que se pasa como un número hexadecimal.
En la tercera línea, creamos una malla utilizando la geometría y el material creado anteriormente. A continuación, giramos el cubo 45 grados en el eje Y para que se vea mejor. Tenemos que cambiar los grados a radianes, que se maneja con la ecuación que probablemente recuerdes de tu clase de física en la escuela secundaria: Matemáticas.PI * 45/180. Finalmente, el cubo se añade a la escena..
Ahora podrías abrir index.html en su navegador para ver los resultados, pero no verá nada porque la escena aún no está renderizada.
Para renderizar algo, primero debemos agregar la cámara a la escena, para que el renderizador sepa desde qué punto de vista debe renderizar las cosas. Hay algunos tipos de cámaras en Three.js, pero probablemente solo uses THREE.PerspectiveCamera. Este tipo de cámara está presentando la escena como vemos nuestro mundo. Vamos a crear uno:
var camera = new THREE.PerspectiveCamera (45, width / height, 0.1, 10000);
"Para renderizar algo, primero debemos agregar la cámara a la escena, para que el renderizador sepa desde qué punto de vista debe renderizar las cosas".
Crear la cámara es un poco más complicado que el resto de las cosas que hemos hecho hasta ahora. El primer argumento define el FOV (campo de visión), el ángulo que se puede ver desde donde se encuentra la cámara. Un FOV de 45 grados se ve natural. A continuación, definimos la relación de la cámara. Este es siempre el ancho del renderizador dividido por su altura, a menos que quiera lograr algunos efectos especiales. Los dos últimos números definen qué tan cerca y qué tan lejos puede estar el objeto de la cámara a dibujar.
Ahora tenemos que mover la cámara un poco hacia atrás y hacia arriba, ya que todos los objetos creados en Three.js tienen su posición establecida en el centro de la escena (x: 0, y: 0, z: 0) de forma predeterminada:
camera.position.y = 160; camera.position.z = 400;
los z La coordenada es positiva en la dirección del espectador, por lo que los objetos con una mayor z la posición aparecerá más cercana a usted (en este caso, ya que movimos la cámara, todos los objetos aparecerán más alejados de usted).
Ahora, vamos a agregar la cámara a la escena y renderizarla:
scene.add (cámara); renderer.render (escena, cámara);
Usted agrega la cámara al igual que agregó el cubo. La siguiente línea representa la escena usando esta cámara. Ahora puede abrir el navegador y debería ver lo siguiente:
Solo deberías poder ver la parte superior del cubo. Esto es porque movimos la cámara hacia arriba y sigue siendo mirando directamente en frente de ella. Esto puede solucionarse informando a la cámara qué posición debe tener Mira. Agregue esta línea después de las líneas que establecen la posición de la cámara:
camera.lookAt (cubo.posición);
El único argumento pasado es una posición en la que se verá la cámara. Ahora, la escena se ve mejor, pero el cubo sigue siendo negro, sin importar qué color hayas establecido al crearlo:
El cubo es negro, porque no hay luces en la escena, así que es como una habitación completamente negra. Ves un fondo blanco porque no hay nada que dibujar aparte del cubo. Para evitar eso, utilizaremos una técnica llamada skybox. Básicamente, agregaremos un cubo grande que mostrará el fondo de la escena (por lo general, un terreno lejano si está abierto). Por lo tanto, vamos a crear la caja. Este código debe ir antes de la renderer.render llamada:
var skyboxGeometry = new THREE.CubeGeometry (10000, 10000, 10000); var skyboxMaterial = new THREE.MeshBasicMaterial (color: 0x000000, lado: THREE.BackSide); var skybox = new THREE.Mesh (skyboxGeometry, skyboxMaterial); scene.add (skybox);
Este código es similar al que crea el cubo. Pero esta vez la geometría es mucho más grande. Tambien hemos usado THREE.MeshBasicMaterial Ya que no necesitamos encender el skybox. Además, note el argumento adicional pasado al material: lado: TRES.. Como el cubo se mostrará desde el interior, tenemos que cambiar el lado que se dibuja (normalmente, Three.js dibuja solo las paredes exteriores).
Ahora la escena renderizada es completamente negra. Para arreglar eso tenemos que añadir luz a la escena. Usaremos TRES.Luz, Que emite la luz como una bombilla. Añade estas líneas después del skybox:
var pointLight = nuevo THREE.PointLight (0xffffff); pointLight.position.set (0, 300, 200); scene.add (pointLight);
Como puede ver, hemos creado la luz puntual con el color blanco, luego estamos configurando su posición para que esté arriba y atrás un poco, para iluminar la parte frontal y la parte superior del cubo. Finalmente la luz se agrega a la escena como cualquier otro objeto. Abra el navegador y debería ver un cubo sombreado y coloreado:
Pero el cubo sigue siendo bastante aburrido. Vamos a añadirle algo de movimiento..
Ahora añadiremos algo de movimiento a la escena. Permite hacer que el cubo gire alrededor del eje Y. Pero primero, tenemos que cambiar la forma en que renderizamos la escena. Uno renderer.render llamada, renderiza el estado actual de la escena una vez. Así que incluso si animamos el cubo de alguna manera, no lo veremos moverse. Para cambiar eso, tenemos que agregar el bucle de render a nuestra aplicación. Esto se puede lograr usando el renderAnimationFrame Función, que fue creada especialmente para ese fin. Es compatible con la mayoría de los principales navegadores, y para aquellos que no lo admiten, Three.js viene con su propio polyfill. Entonces, cambiemos esto:
renderer.render (escena, cámara);
a esto:
función render () renderer.render (escena, cámara); requestAnimationFrame (render); render ();
En realidad, no hay ningún bucle allí porque congelaría el navegador. los requestAnimationFrame La función se comporta un poco como setTimeout, pero está llamando a la función pasada tan rápido como el navegador está listo. Entonces, nada realmente cambió en la escena mostrada y el cubo todavía no se está moviendo. Vamos a arreglar eso. Three.js viene con TRES. Que se puede utilizar para lograr una animación suave de los objetos. Primero, inicialízalo antes de hacer definición de la función:
reloj var = nuevo TRES. reloj;
Ahora, cada vez que llames clock.getDelta devolverá el tiempo desde la última llamada, en milisegundos. Esto se puede utilizar para rotar el cubo de esta manera:
cube.rotation.y - = clock.getDelta ();
Añade esta línea entre la renderer.render y el requestAnimationFrame llamadas en el hacer función. Es simplemente restar el tiempo pasado de la rotación del cubo en el eje Y (recuerde que está en radianes) para girar el cubo en el sentido de las agujas del reloj. Ahora abre el navegador y deberías ver tu cubo girando en el sentido de las agujas del reloj.
En esta parte de la serie, aprendiste cómo preparar la escena, agregar objetos y luces, y cómo animar cosas. Puedes experimentar con la aplicación, agregar más o diferentes objetos, luces. Tu decides. La próxima vez te mostraré cómo usar texturas y cómo crear algunos efectos agradables con partículas. No olvide echar un vistazo a la documentación si tiene algún problema..
Accentsconagua