Crea una página de destino de WebGL 3D

Sep 12, 2025
Cómo
WebGL 3D
[dieciséis] (Crédito de la imagen: Futuro)

Crear una página de destino de WebGL 3D es una forma de obtener una gran primera impresión con su audiencia. Con WebGl, puede ofrecer contenido visual de alta calidad directamente en el navegador. Puede hacerlo sin complementos ni ningún requisito especial. Todos los navegadores modernos son compatibles con WebGL, junto con dispositivos móviles y tabletas. WebGL le permite crear increíbles escenas 3D. Puede alimentar experiencias de WebVR, manipular video, prestar sombreadores gráficos y mucho más.

En este tutorial, estará haciendo una página de destino para el estudio ficticio de cine, estudios relativos. El concepto es dramático y visualmente atractivo, ya que un objeto misterioso refleja y gira en respuesta a la interacción del ratón. Las partículas lo rodean, cambiando el color a medida que se mueven. Trabajará a través de cada uno de los pasos para crear esta página interactiva, lo que le permite generar suyo propio para sus proyectos (para una mayor inspiración, consulte nuestro post en el mejor páginas de destino ).

Utilizará solo las características incluidas de Three.js, la poderosa biblioteca de renderizado 3D para la web. Puedes usar tus propias imágenes como texturas para hacerlo único. También aprenderá sobre la utilización de mallas, iluminación y texturas para mejorar los detalles de la superficie, cómo usar los mapas ambientales, y cómo agregar capas para profundidad e interés.

Debe haber más que suficiente para comenzar, y mucho para alimentar sus próximos proyectos.

Antes de que empieces, Descarga los archivos para este tutorial. .

01. Configuración básica HTML

Para comenzar, necesitas un lugar donde ver tu escena 3D. Configure un archivo HTML básico e incluye un enlace a tres.js. Esto puede ser alojado externamente o agregado de la Repositorio de tres.js aquí: . Agregue algunos CSS simples para que la página Pantalla completa y elimine cualquier barra de desplazamiento. Guarde su archivo en su servidor web local, para que pueda servir el HTML cuando esté listo para probar. Agregue el siguiente código para comenzar. 

 ​​& lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; cabeza y gt;
& lt; title & gt; relative studios & lt; / title & gt;
& lt; script src = "libs / three.min.js" & gt; / lt; / script & gt;
& lt; estilo & gt;
html, cuerpo {margen: 0; relleno: 0; Desbordamiento: oculto; }
& lt; / estilo & gt;
& lt; / cabeza y gt;
& lt; cuerpo y gt;
& lt; script & gt;
// El código 3D va aquí
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

02. Añadir variantes globales

Necesitará algunas variables para referencias durante todo el resto del código. Establece eso ahora. Esto incluirá una matriz para mantener partículas, una variable 'T' para su tetraedro, ratón, raycaster y luces.

Dentro de sus etiquetas de script, comience a agregar el siguiente código. 

 // Vars
var num = 30;
var objetos = [];
var raycaster = nuevo tres.raycaster ();
var mouse = nuevo tres.vector2 ();
var luz, t;

03. Añadir una escena, cámara y renderizar.

Necesitamos primero agregar una escena que contendrá todos nuestros objetos. Luego, agregamos una cámara que puede moverse dentro, panorámica, se inclina y se mueve como necesitamos. El primer atributo es el campo de visión. El segundo es la relación de aspecto. También puede definir los planos de recortes cercanos y lejanos en los atributos tercero y cuarto. Último, agregue el renderizador, que maneja dibujando la escena al lienzo.

En la etiqueta del script, agregue el siguiente código. 

 // Crea Cámara
Var Cámara = Nuevo Tres.PerspectiveCamera
(65, ventana.innerwidth / window.innerheight,
0.1, 1000);
cámara.posición.set (0.0,0.0,5);
// crear una escena
var escena = nuevo tres.scene ();

// crear renderizador
Var Renderer = NUEVO TRES.WEBGLRENDERER (
{antialias: verdadero});
render.setsize (ventana.innerwidth, ventana.
innerheight);
Documento.body.appendchild (Renderer.Melement
)

04. Añadir un foco

A continuación, necesitas agregar una luz a la escena. Three.js viene con una variedad de luces, incluyendo puntos, direccionales, ambientes y focos. Use un foco para esto. Le dará una posición y las propiedades direccionales, y le permitirá lanzar sombras si lo desea más tarde.

Agregue el siguiente código siguiente para agregar el foco. 

 // Crea una luz de punto
luz = nuevo tres.spotlight (0xccddff, .8);
luz.position.set (0,0,5);
escena.add (luz);

05. Añadir un bucle de animación.

Un bucle de animación, a veces llamado un 'bucle de renderizado', se llama idealmente 60 veces por segundo. La película se ejecuta a 24 cuadros por segundo (FPS) y esto es lo suficientemente rápido como para engañar al ojo para ver el movimiento constante sin interrupción. En la animación por computadora, apuntamos a al menos 30 fps, pero idealmente 60 fps. Esto asegura un rendimiento visual muy suave, incluso si los marcos se dejan caer periódicamente.

Bloqueamos este bucle de animación a la función de solicitud de solicitud de solicitud, que hace dos cosas. Primero, garantiza que el navegador esté listo para representar el siguiente cuadro. También significa que las animaciones pueden pausar la representación cuando el usuario ya no está viendo la pestaña del navegador,

Agregue este código para renderizar la escena en un bucle de animación: 

 var animate = función () {
solicitud de solicitud (animado);
render.render (escena, cámara);
};

// Iniciar la bucle de animación
animar ();

06. Cargar una textura de tierra

WebGL 3D

[dieciséis] Puedes encontrar una variedad de texturas gratuitas en línea. (Crédito de la imagen: Richard Mattka)

A continuación, crearás un terreno para la escena. Para comenzar, necesita cargar una imagen para usar. Se pueden crear texturas para cosas como superficies de suelo y paredes tomando sus propias fotos y recortando cuidadosamente los bordes de ajuste en Photoshop CC . Solo asegúrate de que puedan ablandar bien. Para comenzar rápidamente, también hay excelentes bibliotecas en línea, ven nuestro mejor en Texturas gratis .

Puedes elegir cualquier cosa que tezcan. Esto significa que los bordes se mezclarían sin problemas si los colocas de lado a lado. Puedes seleccionar algo como azulejos o piedras para esto. Observe que utiliza las opciones de envoltura de textura para repetir la envoltura para esto. Este ejemplo utiliza la repetición de 12x12. Ajuste esto para adaptarse a su imagen una vez que pruebe la escena. 

 // Cargar una textura de tierra
Var textura = nuevo tres.TextureAader ().
carga ("activos / stone.jpg");
Texture.Wraps = texture.wrapt = tres.
Justificación de repetición;
textura.reepat.set (12,12);

07. Crea un material de tierra.

Three.js incluye una variedad de tipos de materiales para que use. Los materiales se consideran como la piel que cubre un objeto 3D. Puede usar materiales básicos que no reaccionan a los materiales de luz o shader de luz o lambert que lo realicen. Puedes usar tus propios materiales de sombreado personalizados también. Para este terreno, use un material físico. Tiene un aspecto muy realista, reaccionando muy bien. Use la textura que usted cargó como el mapa difuso, y también como un mapa de baches si no tiene una textura específica para eso. 

 // Crear material de tierra
material = nuevo tres.meshphysicalmaterial ({mapa: textura, bumpmap: textura});

08. Crea una malla de tierra

WebGL 3D

[dieciséis] Se pueden usar texturas gratuitas para crear mallas como esta (Crédito de la imagen: Richard Mattka)

Cuando combinamos el material (piel) con la geometría que define la forma del objeto 3D, creamos una malla. Para el suelo, necesitas un plan simple. El sombreador y la textura del material crearán la ilusión de detalle de superficie complejo.

Agregue el siguiente código para crear su malla de tierra, gire a un ángulo agradable y colóquelo debajo de la cámara. Asegúrese de ejecutar su código después de esto para ver cómo se ve. Ajuste cualquier código en el que necesite marcarlo. 

 // Crear malla de tierra
var geometría = nuevo tres.PlaneBuffereometría
(100,100);
var molido = nuevo tres.mesh (geometría,
material );
tierra.rotation.z = math.pi / 180 * -45;
Ground.Rotation.x = math.pi / 180 * -90;
tierra.position.y = -2.0;
escena.add (tierra);

09. Cargar un objetivo

A continuación, agregará un objeto central 3D para el interés focal. Esta es la estrella de su escena, así que elija una textura que le guste cubrirla. Nota: Hará este objeto altamente reflexivo, por lo que la textura que cargue aquí es un aspecto más sutil que el suelo fue. 

 // Cargar textura de objeto
Var textura = nuevo tres.TextureAader ().
carga ("activos / rock_01_diffusion.jpg");

10. Crea un mapa de entorno.

WebGL 3D

[dieciséis] Mostrar lo que está sucediendo en tu escena usando un mapa de cubo (Crédito de la imagen: Richard Mattka)

A continuación, cree un entorno alrededor de su objeto que se refleje en su superficie. También puede agregar esto a la escena como la propiedad de la escena. Si lo desea. Para cargar un entorno, usas un CUBETEXTURLOADE. Las imágenes que usas deben ser seis imágenes que ciguen el interior de su cubo para formar una imagen sin costura, llamados mapas de cubo. 

 VAR ENVMAP = NUEVO TRES.CUBETEXTURETERADOR ()
.SETPATH ​​('Activos /')
.load (['px.jpg', 'nx.jpg', 'py.jpg', 'ny.
jpg ',' pz.jpg ',' nz.jpg '];

11. Añadir TETRAHEDON

WebGL 3D

[dieciséis] Este tetraedro es una de las geometrías predeterminadas de tres. (Crédito de la imagen: Richard Mattka)

Three.js viene con muchas geometrías predeterminadas que puede usar para sus escenas. Uno de los más fríos es el tetraedro. Se necesita un radio y un parámetro de 'detalle' para definir el número de caras del objeto.

Agregue uno a su escena, con el siguiente código. 

 // Crea tetraedro
var geometría = nuevo tres.
Tetraedronbufffereometry (2,0);
vario var = nuevo tres.meshphysicalmaterial
({mapa: textura, ENVEMAP: ENVEMAP,
Metalness: 1.0, rugosidad: 0.0});
t = nuevo tres.mesh (geometría, material);
t.rotation.x = math.pi / 180 * -10;
escena.add (t);

12. Añadir rotación y objetivo de cámara.

Para asegurarse de que la cámara siempre esté mirando su objeto principal, use la función Cámara.Lookat. También puede agregar una rotación ambiental a su objeto también.

Actualice su código de función animate para verse así. 

 solicitud de solicitud (animado);
t.Rotation.y - = 0.005;
cámara.Lookat (T.Position);
render.render (escena, cámara);

13. Añadir lazo de partículas

A continuación, agregue algunas partículas ambientales a la escena. Estos se mezclarán muy bien con el bucle de video de primer plano que agregará más tarde, además de ser interactivo. Agregue un simple 'para' bucle para mantener el código que usará para crear múltiples partículas. 

 para (i = 0; i & lt; = num; i ++) {
// El código de partículas irá aquí
}

14. Crea malla de partículas.

Lo primero que hay que hacer es crear el objeto de partículas. Podrías hacer esto con esferas, sprites o cualquier objeto que desees. Por ahora, intenta hacerles esferas simples.

Dentro de su bucle para el bucle, agregue el siguiente código. 

 // Crear nueva malla
var geometría = nuevo tres.sphereBuffergeometry (.1,6,6);
var Material = nuevo tres.meshphysicalmaterial ({ENVEMAP: ENVEMAP, METICOLDE: 1.0});
var partícula = nuevo tres.mesh (geometría, material);

15. Establecer la posición aleatoria y la distancia.

Las partículas orbitarán el objeto central y deben colocarse aleatoriamente para que llenen bien el espacio y tengan un aspecto orgánico. Agregue el siguiente código para configurar una posición irregular y luego asigne una distancia constante para cada partícula. 

 // Establecer posición aleatoria
partícula.posición.set (matemath.random () * 100.0 -
50.0,0.0, math.random () * - 10.0);
// Calc distnace como constante y asignar
al objeto
var a = nuevo tres.vector3 (0, 0, 0);
var b = partícula.posición;
var d = a.distanceto (b);
partícula.distance = D;

16. Configurar ángulos para las órbitas.

Para hacer que anime las órbitas más rápido, agregue las constantes de ángulo para las órbitas y guárdelas como una propiedad de la partícula. Agregue el siguiente código para definir estos ángulos de contenido aleatorio. 

 // Defina 2 ángulos aleatorios pero constantes
en radianes
Particle.Radians = Math.Random () * 360 * Matemáticas.
PI / 180; // ángulo inicial
PARTLE.RADIANS2 = MATH.RANDOM () * 360 * Matemáticas.
PI / 180; // ángulo inicial

17. Añadir partícula a escena y colección.

WebGL 3D

[dieciséis] Añade tus partículas a tu escena (Crédito de la imagen: Richard Mattka)

Por último, agregue la partícula a la escena y a la matriz de objetos que haya definido anteriormente. Esto hará que la itera todas las partículas sea fácil más fácil. 

 // Agregar objeto a escena
escena.add (partícula);
// añadir a la colección
objetos.push (partícula);

18. Añadir animación a las partículas.

A continuación, debe actualizar la posición y la rotación de sus objetos de partículas. Estas órbitas a una distancia constante del centro de escena. Agregue el siguiente código a su función animada. 

 para (i = 0; i & lt; = num; i ++) {
var o = objetos [i];
o.Rotation.y + =. 01;
Si (I% 2 == 0) {
O.RADIANS + =. 005; o.Radians2 + =. 005;
} demás {
O.RADIANS - =. 005; O.RADIANS2 - =. 005;
}
o.position.x = (math.cos (O.RADIANS) *
o.distance);
O.Position.z = (mathsin (O.RADIANS) *
o.distance);
o.position.y = (mathsin (O.RADIANS2) *
o.distance * .5);
}

19. Añadir un título

WebGL 3D

[dieciséis] (Crédito de la imagen: Richard Mattka)

A continuación, agregue un título en el centro de la pantalla, un nombre para presentar su marca. Las letras para títulos le dan un gran aspecto cinematográfico. Use cualquier fuente / estilo que le guste, pero mire las referencias del título de la película para la inspiración. Vea nuestra lista de fuentes gratis Para obtener una lista de nuestras fuentes descargables favoritas.

Primero agregue el elemento DOM para su título. Agregue esto después de que las etiquetas del script antes de la etiqueta del cuerpo de cierre. 

 & lt; H1 & GT; Relator Studios & Lt; / H1 & GT;

Agregue los siguientes estilos para su título a sus etiquetas de estilo en la parte superior de su archivo. 

 H1 {Color: blanco; Posición: Absoluto; Top: 50%;
Índice Z: 100; Ancho: 100%; Text-alinec: Centro;
Transformar: traducir (0, -100%); Familia tipográfica:
'Raleway', Sans-Serif; Peso de fuente: 100;
Espacio de letras: 40px; Transformación de texto:
mayúsculas; Tamaño de fuente: 16px; }

20. Añadir un bucle de video

WebGL 3D

[dieciséis] No olvides establecer tu video en 'MUTED' (Crédito de la imagen: Richard Mattka)

Un buen truco para crear profundidad a su aterrizaje es agregar un pequeño bucle de video. Puedes usar humo, polvo o partículas. Estos están ampliamente disponibles en línea, o parte de un gran número de paquetes de video y reproducción de cine. Agregue la siguiente etiqueta de video después de su etiqueta H1. Tenga en cuenta que desea configurarlo en 'MUTED' y AutoPlay. Esto también permitirá que el video se reproducirá en dispositivos móviles también en línea. 

 ​​& lt; ID de video = "VideoBacker" Loop SRC = "Activos /
Snow.mp4 "Autoplay Muted & GT; & LT; / Video & GT;

Para diseñar el video, agregue los siguientes CSS a sus estilos a la cabeza de su página. 

 ​​#videobacker {Tamaño de fondo: cubierta;
objeto-ajuste: cubierta; Índice Z: 9; Opacidad: .3;
Posición: Absoluto; TOP: 0px; Izquierda: 0px;
Ancho: 100VW; Altura: 100vh; Transición: 1S
opacidad facilidad al aire libre;

21. Añadir carta de carta

WebGL 3D

[dieciséis] La carta-boxeo restringe el ancho de su interfaz (Crédito de la imagen: Richard Mattka)

Para dar realmente su página de destino un estilo cinematográfico, agregue algunos cuadros de letras a la página.

Comience a agregar los elementos div para esto. 

 ​​& lt; div clase = 'bar-top' & gt; & lt; / DIV & GT;
& lt; div clase = 'bar-inferior' & gt; & lt; / div & gt;

Luego actualice sus estilos para agregar estilos para estas dos barras negras. Puede ajustar estos estilos a su gusto y también las necesidades. 

 ​​.Bar-top {fondo-color: negro;
Altura: 100px; Posición: Absoluto; TOP: 0;
Izquierda: 0; Índice Z: 100; Ancho: 100VW;}
.Bar-Fondo {Fondo-color: Negro;
Altura: 100px; Posición: Absoluto; fondo: 0;
izquierda: 0; Índice Z: 100; Ancho: 100VW;}

Este artículo apareció originalmente en la emisión 287 del diseñador web. Comprar emito 287 o Suscríbete aquí .

Leer más:

  • Componentes web: la guía definitiva.
  • Cómo crear un efecto de paralaje en capas
  • Cómo agregar animación a SVG a través de CSS

Cómo - Artículos más populares

Cómo simplificar la creación de la forma de mezcla en maya

Cómo Sep 12, 2025

[dieciséis] (Crédito de la imagen: Antony Ward) En mayas, las formas de mezcla, o los objetivos de morph, ya que también se..

4 pasos para usar fuentes variables

Cómo Sep 12, 2025

[dieciséis] (Crédito de la imagen: Futuro) Las fuentes variables permiten a los diseñadores de fuentes definir variaciones ..

Cómo implementar modos de luz u oscuros en CSS

Cómo Sep 12, 2025

[dieciséis] La especificación CSS es en constante evolución. El proceso para implementar nuevas características en CSS es complicad..

Cómo hacer tu propia Biblia de carácter

Cómo Sep 12, 2025

[dieciséis] Para cualquiera que trabaje profesionalmente en diseño de personaje , una Biblia de carácter es uno de los el..

Cómo pintar miniaturas deliciosas

Cómo Sep 12, 2025

[dieciséis] El origen de la pintura en miniatura se extiende hacia la edad medieval, cuando los artistas en miniatura pintaron exquisi..

Estrategia de experiencia del usuario maestro

Cómo Sep 12, 2025

[dieciséis] Estrategia ux es un proceso que debe iniciarse antes de que comience el diseño o desarrollo de un producto digit..

Introducción a las pruebas de facilidad de uso

Cómo Sep 12, 2025

Un producto web exitoso cumple no solo las necesidades de su organización, sino también las necesidades de sus usuarios. Pruebas de usabilidad: se realizan temprano y con frecuencia, es una..

Crea ropa 3D con arrugas y pliegues realistas

Cómo Sep 12, 2025

[dieciséis] Hacer ropa virtual realista es una de las tareas más desafiantes desde la innovación de la animación de CG. La ropa es ..

Categorías