Comienza con WebGL usando tres.js

Jan 31, 2026

Cómo

Web developer creating 3D shape graphics

[dieciséis]

Webgl , que es ampliamente apoyado en todos los navegadores modernos, le permite trabajar con gráficos 3D acelerados por hardware en Javascript , abriendo una gran variedad de posibilidades para las aplicaciones y juegos basados en navegadores, solo echa un vistazo a estos 20 Ejemplos increíbles de WebGL en acción. , para la prueba.

Descarga el código de Filesilo

WebGL en sí es bastante bajo nivel, y es poco probable que querrá trabajar con él en su forma de vainilla. Hay una gama de bibliotecas e incluso motores de juego disponibles para proporcionar una funcionalidad de mayor nivel.

En este tutorial te voy a mostrar. Cómo hacer una aplicación o sitio que usa webgl en combinación con tres.js , que es una biblioteca gratuita de código abierto que proporciona la abstracción de WebGL.

01. Consigue tres.js

Tendrás que empezar por conseguir tres.js . Una vez que tenga la última versión, coloque tres.js en la carpeta de su proyecto. Luego lo agregaremos como un script a nuestra página como cualquier otra biblioteca de JavaScript. Pondremos nuestro propio código en un archivo de Javascript separado.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; cabeza y gt;
  & lt; meta charset = UTF-8 & GT;
  & lt; title & gt; comenzar a comenzar con tres.js & lt; / title & gt;
  & lt; / cabeza y gt;
  & lt; estilo de cuerpo = "margen: 0;" & gt;
  & lt; script src = "three.js" & gt; / lt; / script & gt;
  & lt; script src = "demo.js" & gt; & lt; / script & gt;
  & lt; / body & gt;
& lt; / html & gt;

02. Establecer la escena

Necesitamos tres cosas para comenzar con WebGL: una escena, una cámara y un renderizador. Una escena es donde colocamos los objetos que se mostrarán por tres.js. Una cámara es el punto de vista desde donde los veremos. El Renderer trae los dos juntos y dibuja la pantalla en consecuencia. Una vez que tengamos estas configuradas, agregamos el renderizador al documento.

 Var ancho = ventana.innerwidth;
var altura = ventana.innerheight;
var viewnangle = 45;
var cerca deCripping = 0.1;
var farclipping = 9999;
var escena = nuevo tres.scene ();
VAR Cámara = Nuevo Three.PerspectiveCamera (Glovelangle, Ancho / Altura, Cerca, Frencing);
VAR Renderer = NUEVO TRES.WEBGLRENDERER ();
render.setsize (ancho, altura);
documento.body.appendchild (Render.Melement);

03. Crea un bucle

A continuación, necesitamos crear un bucle para hacer realidad nuestra escena. Hacemos esto usando el renderer.render () función, pero la parte clave es usar recursivamente Solicitud de solicitud () , que es una función incorporada que permite al navegador solicitar otro marco cuando esté listo para dibujar uno. Usando Solicitud de solicitud () Es más fácil y resulta en la animación más suave que intentar el dibujo de marcos de tiempo.

 Función Animate () {
  solicitud de solicitud (animado);
  render.render (escena, cámara);
}
animar ();

04. Crea objetos básicos.

Ahora podemos comenzar a agregar algunos objetos a nuestra escena. Podemos hacer esto creando objetos de malla y agregándolos a ella. Una malla se compone de geometría (la forma del objeto) y un material (el color o la textura que se usa para pintarlo). Crearemos algunos objetos básicos definiendo tres geometrías diferentes y le asignaremos diferentes materiales de color.

 var CUCEGEOMETRY = NUEVO TRES.BOXTEOMETRÍA (1, 1, 1);
var cubematerial = nuevo tres.meshlambertmaterial ({color: 0xff0000});
var cubo = nuevo tres.mesh (cubegeometría, cubematerial);
var conegeometría = nuevo tres.Conegeometría (0.5, 1, 4);
var conematerial = nuevo tres.meshlambertmaterial ({color: 0x00ff00});
var cono = nuevo tres.mesh (congresomeometría, conematerial);
var spheregeometry = new three.sphereomeometry (0.5, 8, 8);
var esferematerial = nuevo tres.meshlambertmaterial ({color: 0x0000ff});
var sphere = new three.mesh (esferafeseómetros, esferematerial);

05. Especifique una posición

De forma predeterminada, se agregan objetos en el origen (x = 0, y = 0, z = 0) de la escena, que también es donde está nuestra cámara, por lo que también tendremos que especificar una posición para ellos. Luego estamos listos para agregar las mallas a nuestra escena, lo que significará que se prestan automáticamente en el animar() lazo.

 CUBE.POSITION.X = -2
cube.position.z = -5;
cono.position.z = -5;
esfera.position.z = -5;
esfera.position.x = 2;
cube.position.z = -5;
escena.add (cubo);
escena.add (cono);
escena.add (esfera);

06. Añadir una fuente de luz

Si ve su página ahora, encontrará que las cosas se ven un poco planas. No se aplica ninguna iluminación a los objetos, por lo que son colores primarios sólidos y parecen dos dimensiones. Para solucionar esto, necesitamos cambiar de Mallabasicmaterial a un material que apoya la iluminación; usaremos Meshlambertmaterial . También necesitamos agregar una fuente de luz a la escena.

 var luz = nuevo tres.pointlight (0xfffffff);
luz.position.x = 0;
luz.position.y = 10;
luz.position.z = 0;
escena.add (luz);

07. Mueve la fuente

Ahora estamos llegando allí! Debería ver qué son evidentemente objetos tridimensionales en su página. Lo que aún no hemos hecho es aprovechado al máximo la animar() función. Hagamos algunos cambios para que nuestra fuente de luz se mueva en un movimiento circular por encima de los objetos.

 var lightangle = 0;
función animate () {
  Lightangle + = 5;
  if (Lightangle & GT; 360) {lightangle = 0;};
  luz.position.x = 5 * math.cos (Lightangle * math.pi / 180);
  luz.position.z = 5 * math.sin (lightangle * math.pi / 180);
  solicitud de solicitud (animado);
  render.render (escena, cámara); }

08. Añadir textura

En la práctica, probablemente no queremos que nuestros objetos sean colores planos. Sería más típico aplicarles algunas texturas de un archivo. Podemos hacer esto usando Three.TextureLader () . Cambiemos cómo se crea nuestro objeto cono para utilizar una textura que hemos cargado de un archivo. La función se llama cuando se carga el archivo.

Dónde encontrar texturas gratis para proyectos 3D.

 var textureader = nuevo Three.TexturEader ();
textureloader.load ("./ crash_texture.jpg", textura = & gt; {
  var conegeometría = nuevo tres.Conegeometría (0.5, 1, 4);
  var conematerial = nuevo tres.meshlambertmaterial ({mapa: textura});
  var cono = nuevo tres.mesh (congresomeometría, conematerial);
  cono.position.z = -5;
  escena.add (cono);
  },
);

09. Hazlo natural.

Las cosas se ven mejor, pero algo aún no es bastante natural. La textura se ve muy plana y no responde a la iluminación. Podemos resolver esto a través del uso de la asignación de golpes, lo que nos permite usar partes claras y oscuras de una imagen para simular la textura en la superficie de un objeto. Probemos esto con una textura diferente en la esfera. Cambiaremos el material a Malhhongmaterial , que nos permite especificar un mapa de relieve atributo.

 var textureader = nuevo Three.TexturEader ();
textureloader.load ("./ bump_map.jpg", textura = & gt; {
  var spheregeometry = new three.sphereomeometry (0.5, 8, 8);
  var esferematerial = nuevo tres.meshphongmaterial ({color: 0x0000ff, bumpmap: textura, bumpscale: 1.0});
  var es esfera = nuevo tres.mesh (esferafeseómetros, esferematerial);
  esfera.position.z = -5;
  esfera.position.x = 2;
  escena.add (esfera);
  },
);

10. Añadir controles

Como toque final, dale un poco de control al usuario sobre la escena. Para agregar la capacidad de sartén, hay una biblioteca adicional que se envía con tres.js que lo hace increíblemente fácil de hacer solo eso. Asegúrese de extraer OrbitControls.js del paquete Three.js a su directorio de proyecto e incluirlo en su página. Esta es una de varias bibliotecas de control que se envían con tres.js para cumplir con los estilos comunes de control de la cámara.

 & lt; script src = "orbitcontrols.js" & gt; / script & gt;

11. Aplicar a la cámara.

Ahora todo lo que necesitamos hacer es crear un Tres.orbitcontrols Objeto y aplicarlo a nuestra cámara. La biblioteca se encargará del resto para usted: no tendrá que escuchar clics, movimientos del mouse, etc. También es posible que desee mover sus objetos al punto de origen, y ofrezca la cámara para que pueda sartén y cuidadosamente alrededor de los objetos.

Con eso, hemos terminado con nuestra introducción. Debe tener tres objetos con diferentes estilos de textura, una iluminación dinámica y una cámara controlada por el usuario para jugar.

 Cámara.Position.z = 10;
VAR CONTROLS = NUEVO TRES.ORTRONTROLS (CÁMARA);

Este artículo se presentó en el número 268 de Web Designer, la revista Creative Web Design - que ofrece tutoriales expertos, tendencias de vanguardia y recursos gratuitos. Suscríbete al diseñador web ahora.

¿Me gusto esto? Prueba estos:

La guía completa de API de un codificador.
Cómo derretir un objeto 3D con tres.js
Poder un blog con la API de WordPress

Comienza con WebGL usando tres.js

01. Consigue tres.js

02. Establecer la escena

03. Crea un bucle

04. Crea objetos básicos.

05. Especifique una posición

06. Añadir una fuente de luz

07. Mueve la fuente

08. Añadir textura

09. Hazlo natural.

10. Añadir controles

11. Aplicar a la cámara.

Cómo - Artículos más populares

Gestiona el estado del formulario de reacción con Formik

Comienza con Bulma

Cómo hacer un logotipo en Photoshop

Cómo pintar una escena forestal de fantasía de ensueño

Cómo desarrollar criaturas míticas

Los profesionales de la marca comparten la voz de la marca de uñas

Convierte tus diseños 2D en 3D con Project Felix

Crea un entorno de juego en un motor irreal 4

Categorías