Crea imágenes 3D interactivas con tres.js

[dieciséis]

Para iniciar el proyecto, abra la carpeta 'Inicio' en su Código IDE. Abrir index.html Y verás que hay un andamio básico que ya tiene algún código. En la sección del cuerpo, agregue los elementos de visualización aquí que se utilizarán como la interfaz al contenido 3D.

 & lt; div id = "encabezado" y gt;
  & lt; img src = "img / co2.png" id = "insignia" & gt;
  & lt; / DIV & GT;
  & lt; div id = "interno" & gt;
  & lt; Clase de entrada = "Diapositiva" tipo = "Rango" MIN = "0" MAX = "7" STEP = "1" Value = "0" onInput = "ShowVal (esto.value)" & gt;
  & lt; p & gt; arrastre el control deslizante para cambiar el nivel de CO2 & LT; / P & GT;
  & lt; / DIV & GT; 

02. Vinculando las bibliotecas.

El contenido 3D se muestra a través de tres.js, que se incluye aquí. Un modelo de colada se agregará a la escena más tarde. La biblioteca adicional para cargar esto está incluida, junto con una biblioteca de Tween básica. Todas las siguientes líneas vinculan hasta los efectos de procesamiento posterior a la publicación que agregarán el pulido de acabado.

 & lt; script src = "js / thre thre.min.js" & gt; / lt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; script src = "js / tween.min.js" & gt; / lt; / script & gt;
& lt; script src = 'js / postprocessing / effcrapser.js' & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / renderpass.js' & gt; / lt; / script & gt;
& lt; script src = 'js / postprocessing / shaderpass.js' & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / maskass.js' & gt; / lt; / script & gt; 

03. POST PRESENTACIÓN SHASTERS

Después de que la escena haya prestado cada cuadro, se agregarán varios efectos posteriores al proceso. Estas son las bibliotecas que capacitan el efecto de grano de película, un borrón de cambio de inclinación en la parte superior e inferior de la pantalla, finalmente, finalmente, una viñeta se desvanece a los bordes de la pantalla.

04. Añadiendo las variables.

Algunos del Código se han completado para usted. Verá un comentario donde agregar el resto del código del tutorial. Se utilizan varias variables en esta escena 3D, que cuidan la resolución de la pantalla, varios modelos 3D y el procesamiento posterior. Dos variables importantes son las waterht para la altura del agua y la ultramar , que recuerda la última posición del control deslizante.

 var screen_width = window.innerwidth, screen_height = window.innerheight,
 Mousex = 0, Mouseyy = 0, WindowHalfx = Window.InnerWidth / 2, WindowHalfy = Window.InnerHeight / 2, Cámara, Escena, Render, agua, Waterht = 1;
var textureloader = nuevo Three.TexturEoGer ();
VAR compositor, shadetime = 0, película, renderpass, copypass, effVIGnette, grupo, ultral = 0; 

05. Inicialización de la escena.

La función INIT es una gran parte del código, asegurando que la escena esté configurada con el aspecto correcto al principio. Se agrega un contenedor a la página, y aquí es donde se mostrará la escena 3D. Se agrega una cámara y algo de niebla de fondo para desvanecer la distancia.

 FUNCIÓN INIT () {
  VAR Container = Document.CreateElement ('DIV');
  documento.body.appendchild (contenedor);
  cámara = nuevo tres.perspectiveCamera (75, screen_width / screen_height, 1, 10000);
  cámara.posición.sition.set (2000, 100, 0);
  escena = nuevo tres.scene ();
  escena.fog = nuevo tres.fogexp2 (0xb6d9e6, 0.0025);
  Renderer = NUEVO TRES.WEBGLRENDERER ({
  Antialias: verdadero
  }); 

06. Configuración del renderizador

El renderizador recibe un color de fondo y la resolución se establece en el mismo tamaño que la relación píxel de la pantalla. Las sombras están habilitadas en la escena, y se coloca en la página en el elemento del contenedor. Se agrega una luz del hemisferio, que tiene un color cielo y un color.

render.setClearColor (0xADC9D4);
renderer.setpixelratio (ventana.devicepixelratio);
render.setsize (screen_width, screen_height);
renderer.shadowmap.enabled = verdadero;
render.shadowmap.type = three.pcfsoftshadowmap;
contenedor.appendchild (Renderer.Melement);
var luz = new three.hemispherightight (0xa1e2f5, 0x6f4d25, 0.5);
escena.add (luz); 

07. Variables de sombreado

Las variables que controlarán los efectos del proceso de sombreado posteriores se dan sus valores aquí. Estas variables se utilizarán más adelante para agregar valores que controlen el look. Si se ve en la función Params, verá esto ya completado para usted.

 Renderpass = nuevo tres.RenderPass (escena, cámara);
hblur = nuevo tres.shadepass (tres.horizontaltiltshiftshader);
vblur = nuevo tres.shadepass (Three.verticaltiltshiftshader);
pelicular = nuevo tres.shadepass (tres.filmshader);
EffectVIGNETTE = NUEVO TRES.SHAERPASS (TRES.VIGNETHADERADOR);
CopyPass = Nuevo Three.ShadePass (Three.Copyshader); 

08. Componiendo los efectos.

Los efectos deben estar apilados en algo llamado un compositor de efectos. Esto toma cada efecto y aplica el estilo. Luego, todo se muestra como una escena final en la pantalla, que verá cuando se agrega la función Rendering más adelante.

09. Cargando la imagen de la nube

los paramentales Se llama la función y esto establece los parámetros individuales para los efectos posteriores. Se crea un nuevo grupo y esto mantendrá todo el contenido de la escena dentro de ella, para facilitar la rotación del grupo de objetos. Una imagen de PNG transparente se carga como un material de nube que se utiliza como un sprite dentro de la escena.

 Params ();
  grupo = nuevo tres.Group ();
  escena.add (grupo);
  var cloud = textureloader.load ("img / cloud.png");
  Material = nuevo tres.spritematerial ({
  Mapa: Cloud, Opacidad: 0.6, Color: 0x888888, Niebla: VERDADERO
}); 

10. Doble para el bucle

Se crean ocho grupos dentro de la primera. por lazo. Estos ocho grupos han agregado 35 nubes en el segundo para el bucle. Cada nube se coloca en una ubicación al azar sobre la escena. Los grupos se encenderán y apagan con el control deslizante por el usuario para mostrar que el smog que se agrega y se elimine en la visualización.

 para (J = 0; J & LT; 8; J ++) {
  var g = nuevo tres.Group ();
  para (i = 0; i & lt; 35; i ++) {
  var x = 400 * math.random () - 200;
  var y = 60 * math.random () + 60;
  var z = 400 * math.random () - 200;
  sprite = nuevo tres.sPRite (material);
  sprite.position.set (x, y, z); 

11. Escalado de la nube

La nube se escala hasta un tamaño que le permite ser visible en la escena. Cada grupo de nubes después del primer grupo se reduce hacia abajo para que sean virtualmente invisibles para el renderizador. Así es como se harán visibles más adelante, escalándolos de nuevo a su tamaño completo, ya que esto le dará un buen efecto de presencia.

12. Cargando el modelo.

Ahora el cargador colada está configurado para cargar el escena.dae modelo. Cuando termine de carga, el modelo se escanea y cualquier objeto que suceda para que se haga una malla para lanzar sombras y recibir sombras para dar una profundidad adicional a la escena.

 var cargador = nuevo tres.colladaloader ();
cargador.opciones.convertpaxis = verdadero;
cargador.load ('scene.dae', función (colada) {
  var dae = colada.scene;
  dae.traverse (función (niño) {
  if (niño instancef three.mesh) {
  niño.castshadow = verdadero;
  niño.receiveshadow = verdadero;
  }
}); 

13. Encontrar detalles en la escena.

Como el modelo ya está listo para mostrar, está configurado en el tamaño correcto para adaptarse a la escena. El código debe controlar específicamente la altura del agua para que el modelo de agua se encuentre en la escena y se pase a la variable global. De manera similar, la luz principal debe encontrarse para que pueda establecerse para proyectar sombras.

 dae.scale.x = dae.scale.y = dae.scale.z = 0.5;
dae.updatematrix ();
grupo.add (dae);
agua = escena.getObjectbyName ("agua", verdadero);
agua = agua. Los niños 
;
luz = escena.getObjectbyName ("Splight", VERDADERO);
luz = luz.children 
; 

14. Configuraciones de luz

Ahora, a medida que se encuentra el foco de atención, los detalles que lo hacen fundir sombras en la escena. El desvanecimiento de la luz en los bordes del lugar también se establece aquí. Finalmente, como el modelo es el elemento más grande para cargar, el resto de la escena se configurará antes de que se ejecute este código, por lo tanto, la función de renderizado se puede llamar cada cuadro.

 Light.Target.Position.Set (0, 0, 0);
  luz.castshadow = verdadero;
   luz.shadow = nuevo tres.lightshadow (nuevo tres.perspectiveCamera (90, 1, 90, 5000));
  luz.shadow.bias = 0.0008;
  luz.shadow.mapsize.width = 1024;
  luz.shadow.mapsize.height = 1024;
  luz.penumbra = 1;
  luz.decray = 5;
  hacer();
}); 

15. Último código de inicialización

La parte final de la función INIT establece varios ratones y entradas táctiles que moverán la cámara en función de su posición. Un evento también está registrado para escuchar si la pantalla se cambia de tamaño y esto actualizará la pantalla renderizada.

 document.addeventlistener ('mousemove', ondocumentmouseemove, falso);
  document.addeventlistener ('touchstart', ondocumenttouchstart, falso);
  document.addeventlistener ('touchmove', ondocumenttouchmove, falso);
  ventana.addeventlistener ('tamaño de tamaño', onwindowresize, falso);
} 

16. Represando cada marco.

La función de renderización se establece en llamadas tan cerca de 60 cuadros por segundo, ya que el navegador puede administrar. El grupo, que contiene todos los modelos, está configurado para girar por una pequeña cantidad cada cuadro. La posición de la cámara se actualiza desde el mouse o la entrada táctil y continúa mirando el centro de la escena.

17. Actualizando la pantalla

El tiempo de sombreado es una variable que simplemente sube por 0.1 cada cuadro y esto se pasa a la cera para que el grano de la película de ruido se pueda actualizar. El compositor de efectos se actualiza y se presta a la pantalla. Finalmente, el motor Tween también se actualiza.

 ShadeTime + = 0.1;
  Filmpass.uniforms ['Tiempo']. Valor = sombreado;
  compositor.render (0.1);
  Tween.update ();
} 

18. Obtener entrada de usuario

El control deslizante Rango de entrada, agregado en el Paso 1, llama al espectáculo Función, que se define aquí. Cuando el usuario hace clic en esto, simplemente verifica que el control deslizante se haya movido. Si se mueve hacia arriba, el siguiente grupo de nube se amplía con un entre los 0,8 segundos. La altura de agua se actualiza y esto también se interpone hasta la nueva altura.

 Función ShowVal (Val) {
  Si (Val! = Último) {
  if (Val & gt; Último) {
  Nuevo Tween.Toen (Group.Children [Val] .scale) .to ({x: 1, y: 1, z: 1}, 800). Teasing (tween.esing.quadratic.inout) .start ();
  waterht + = 0.07;
  Nuevo Tween.Toen (Water. Scale) .to ({Y: Waterht}, 800). Teasing (tween.Easing.Quadratic.inout) .start (); 

19. Agarrando los árboles.

La variable TEMP encuentra el grupo actual de árboles que debe eliminar de la escena y aquí las escala con una interpolación solo en el eje Y. Se usa una flexibilización elástica para que esto surja fuera de la vista en la pantalla para un efecto agradable. A medida que más agua y nubes están en la escena, los árboles desaparecen.

20. Entrada opuesta

El primer contenido revisó si el control deslizante se deslizó hacia arriba o hacia la derecha. Ahora el código detecta que el usuario se desliza a la izquierda. Las nubes se reducen con un entretenido y así es el nivel del agua para mostrar un efecto de enfriamiento en la tierra.

 Nuevo Tween.Toen (Group.Children [Último] .scale) .to ({x: 0.001, y: 0.001, z: 0.001}, 800). Teasing (tween.esing.quadratic.inout) .start ( )
Waterht - = 0.07;
Nuevo Tween.Toen (Water. Scale) .to ({Y: Waterht}, 800). Teasing (tween.Easing.Quadratic.inout) .start (); 

21. Terminando

El paso final es recuperar los árboles, por lo que se escaman de nuevo a su tamaño original con un entretento elástico.Guarde la escena y vea la página web de un servidor alojado localmente en su propia computadora o en un servidor web.Podrá interactuar con el movimiento del mouse y el control deslizante para cambiar la pantalla de la escena.

Este artículo apareció originalmente en Diseñador web Número 265. Comprarlo aquí .

Artículos relacionados:

• Cómo codificar un marcador de realidad aumentada
• 20 Ejemplos increíbles de WebGL en acción.
• 9 usos brillantes de 3D en diseño web