Muchos diseñadores web buscan formas de agregar un gran impacto a sus diseños de sitios, para que llamen la atención de sus usuarios. Los métodos han evolucionado a lo largo de los años, desde el uso de un gráfico de encabezado, para colocar una presentación de diapositivas debajo del menú de la página de destino, para convertirse en un ancho de navegador completo, y ahora la gran mayoría de los sitios siguen este mismo formato (cree su propio facilidad con un
Creador de sitios web
).
Hoy en día, los diseños que ganan el 'sitio del día' en los diferentes sitios de premios web generalmente intentan hacer algo que es un poco más único, y WebGl es excelente para esto. Agregar un elemento interactivo realmente puede llamar la atención de los usuarios y demostrar que esto no es lo mismo que los otros sitios que acaban de visitar. Hace un sitio mucho más interesante que solo tener una presentación de diapositivas gigantes y algunas
Desplazamiento de paralaje
. Si tiene un sitio con necesidades complejas, asegúrese de que su
Alojamiento web
El servicio está en punto.
14 grandes diseños de la página de destino
Para hacer un efecto de salpicaduras en este tutorial, se agregará una superficie líquida, reflectante, y esto se animará hacia la cámara con olas rodantes avanzando. También habrá partículas que avanzan para completar el aspecto y la sensación. En el centro será el logotipo del sitio, y toda la escena reaccionará al movimiento del mouse del usuario para que el contenido cambie y haga que el 3D realmente se destaque.
los
diseño de logo
se representa como un PNG transparente (manténgalo seguro en
almacenamiento en la nube
), por lo que esto puede ser fácilmente personalizado para su propio diseño. Las luces también animan para que los colores se ornitarán y resaltarán diferentes ondas dentro de la escena.
Abra la carpeta de inicio desde los archivos del proyecto y arrastre esto a su editor de código. Abierto '
index.html
"Y verás que las bibliotecas de JavaScript ya han estado vinculadas para usted. Dentro de las etiquetas de script vacío es donde irá el código. Aquí se detecta a WebGL para asegurarse de que el proyecto se pueda ejecutar, luego se agregan toda una gama de variables que se utilizarán en la escena.
Si (! Detector.webgl) detector.addgetwebglglessage ();
var screen_width = ventana.innerwidth;
var screen_height = window.innerheight;
VAR Render, cámara, escena, Movergroup, Flooreometría, Floormaterial, Luz Pointlight, Pointlight2, Pgeometry;
var piso_res = 60;
var piso_ht = 650;
var stepcount = 0;
var runescala = 9.5;
var noiseseed = math.random () * 100;
02. Crea más variables.
El siguiente bloque de las variables maneja qué tan grande debe ser el piso del agua y la velocidad que se moverá junto con las posiciones iniciales del mouse. El centro de la pantalla se desarrolla y se está utilizando la biblioteca de ruido mejorada para crear la superficie del agua.
var piso_width = 3600;
var piso_depth = 4800;
var mover_spd = 1.9;
var monsex = 0;
var mousey = 0;
var windowhalfx = ventana.innerwidth / 2;
var windowhalfy = window.innerheight / 2;
var snoise = nuevo mejorado ();
var textureloader = nuevo Three.TexturEader ();
03. Calcular el mouse
Se agregan algunas variables finales para los efectos posteriores al procesamiento de la escena. Se agrega un escuchador de eventos que verifica el movimiento del mouse. La escena se moverá en el puerto de visualización para reaccionar al movimiento del mouse. La función que se agrega aquí funciona con la cantidad de movimiento que se está permitiendo.
04. Cambiar la configuración de post procesamiento
Los '
paramentales
'La función es donde se almacenarán todas las configuraciones para los efectos posteriores al procesamiento. Si necesita cambiar algo, este es el lugar para hacerlo. El desenfoque de cambio de inclinación está cubierto en las primeras cuatro líneas, luego la película pasa en las líneas restantes. Esto es principalmente para la intensidad de la pantalla y la intensidad del ruido.
05. Establecer parámetros finales
El último de los parámetros es para la viñeta oscura alrededor del borde de la pantalla. Los '
en eso
' y '
animar
'Las funciones están llamadas a correr. Los '
animar
'La función se creará mucho más tarde en el tutorial, pero el'
en eso
'La función se crea aquí. La cámara y la escena están configuradas para permitir la visualización del contenido 3D.
EffectVignettte.uniforms ["offset"]. Valor = 1.0;
efectivovignette.uniforms ["Oscuridad"].Value = 1.3;
}
en eso();
animar();
FUNCIÓN INIT () {
Cámara = Nuevo Three.PerspectiveCamera (70, Window.Innerwidth / Window.InnerHeight, 1, 4000);
cámara.position.z = 2750;
escena = nuevo tres.scene ();
escena.fog = nuevo tres.fogexp2 (0x1c3c4a, 0.00045);
06. Dejar la luz en
Para ver el contenido de la escena, se colocarán cuatro luces. La primera es una luz del hemisferio, que se usa solo para obtener el ambiente básico de la escena. Siguiente es la luz central que está agregando una luz azul claro en el centro de la escena. Esto se quita a un lado para dar algo de luz a toda la escena.
Var HemispherIrtight = NUEVO TRES.HEMISPHERIAL (0xE3FEFF, 0XE6DDC8, 0.7);
escena.add (Hemispherelight);
HemispherIlight.position.y = 300;
var centradique = nuevo tres.spotlight (0xb7f9ff, 1);
escena.add (luz central);
Central.Position.Set (2500, 300, 2000);
luz de centro.Penumbra = 1;
luz de centro.decray = 5;
07. Luces animadas
Las siguientes dos luces a añadir. '
Puntero
' y '
Pointlight2
'Son luces de colores que círculan en direcciones opuestas alrededor de la escena para que la luz cambie constantemente en la vista. La primera es una luz rosa y la segunda es una luz naranja. El camino y el formato para las imágenes de reflexión se establecen en las dos últimas líneas.
Luz de punta = Nuevo Three.Pointlight (0xe07bff, 1.5);
Pointlight.Position.Z = 200;
escena.add (punta);
PointLight2 = Nuevo Three.Pointlight (0xFF4E00, 1.2);
PointLight2.Position.z = 200;
escena.add (Pointlight2);
var ruta = "img /";
var format = '.jpg';
08. Superficies brillantes
La superficie líquida tendrá una superficie reflectante, brillante y se hace creando un cubo de reflexión. Este es un cubo con un Skybox de 360 grados colocado dentro de él, que se reflejará en la superficie del líquido. Los '
URLS
'La matriz contiene las imágenes a cargar, entonces se configura el material.
09. Configurar algunos grupos.
El grupo de MOVER contendrá algunas partículas que se agregarán más adelante, mientras que el grupo del piso contendrá la superficie del líquido. Se crea un nuevo objeto 3D que mantendrá esa superficie. Habrá dos superficies líquidas; uno tendrá el material reflectante y el segundo tendrá el wireframe '
floormaterial
', como se define aquí.
MOVERGROUP = nuevo tres.Object3D ();
escena.add (Movergroup);
var floorgroup = nuevo tres.Object3D ();
var floormaterial = new three.meshphongmaterial ({
Color: 0xeeeeee, Lado: Three.Doubleside, Blending: Three.AditTivending, Wireframe: True
});
PuleEgeometría = Nuevo Three.PlaneEomeometría (Floor_Width + 1200, Floor_depth, Floor_res, Floor_Res); [sesenta y cinco]
10. Haz las superficies.
[dieciséis]
Cuando se agrega la primera superficie líquida, el mapa de reflexión en esto es muy obvio y la niebla ayuda a mezclar el fondo y la superficie juntos
Las dos superficies líquidas se crean aquí como '
floormesh
' y '
floormesh2
'. Están posicionados y colocados dentro de la '.
grupo de piso
'Luego giró a un buen ángulo de visión frente a la cámara. Esto no es directamente plano, pero ligeramente inclinado, ya que se ve mejor así.
var Floormesh = NUEVO TRES.MESH (FLOPAEGEOMETRY, CUBEMATERIAL);
var floormesh2 = nuevo tres.mesh (flooreometría, floormaterial);
floormesh2.position.y = 20;
floormesh2.position.z = 5;
Floorgroup.add (Floormesh);
Floorgroup.add (Floormesh2);
escena.add (Floorgroup);
floormesh.rotation.x = math.pi / 1.65;
floormesh2.rotation.x = math.pi / 1.65;
floorgroup.position.y = 180; [sesenta y cinco]
11. Añadir partículas flotantes
[dieciséis]
Las partículas flotantes llenan la escena, y cuando todo esto está animado en la función de renderizado, trae un sentido de movimiento hacia la cámara.
La sección del código aquí crea un objeto de geometría vacía y luego coloca en sus 2,000 vértices que actúan como las partículas. Estos se distribuyen en posiciones aleatorias en el eje X, Y y Z. Estos flotarán justo por encima de la superficie del piso líquido.
Pgeometry = NUEVO TRES.GEOMETRY ();
sprite = textureloader.load ("img / sprite.png");
para (i = 0; i & lt; 2000; i ++) {
var vertex = nuevo tres.vector3 ();
vértice.x = 4000 * math.random () - 2000;
vértice.y = -200 + matemath.random () * 700;
vértice.z = 5000 * math.random () - 2000;
pgeometry.verices.push (vértice);
}[sesenta y cinco]
12. Crea el look.
El material definido aquí establecerá cómo se ven las partículas. Se cargó una imagen en el paso anterior y que se usa como imagen en cada partícula, una vez que se crea el material. Luego se aplica a cada punto de la geometría para todas las partículas. Estos se agregan luego a la escena.
13. Añadir el logo
[dieciséis]
Agregar en el logotipo, que es una imagen PNG transparente, lo coloca en el centro de la escena, y es fácil de reemplazar con su propio logotipo más tarde
Se colocará un logotipo en el centro de la pantalla y se agregará a un plano plano que se enfrente a la cámara. El logotipo se hace un poco transparente y se le da una mezcla aditiva para que sea más visible cuando los objetos más ligeros pasan detrás de él. Esto se posiciona y se coloca en la escena.
sprite = textureloader.load ("img / logo.png");
geometría = nuevo tres.PlaneBuffereometría (500, 640, 1);
Material = nuevo tres.Meshlambertmaterial ({
Transparente: Verdadero, Opacidad: 0.8, Blending: Three.AditTivending, Mapa: Sprite, Lado: Three.Doubleside
});
var plano = nuevo tres.mesh (geometría, material);
Plane.Position.Set (0, 70, 1800);
escena.add (avión);
14. Añadir la configuración de render
El renderizador está configurado para tener bordes lisos y anti-alias y ahora se establece el color de fondo. Esto se agrega al cuerpo del documento para que la escena esté en la página HTML. Los efectos de post procesamiento se configuran al tener varios pases de render y sombreado inicializados.
15. Hacer el pase.
Una vez que se agregan el pase de película y falla, se crea un compositor de efectos que compone todos los pases juntos. Estos se agregan uno por uno al compositor y eventualmente se emitirá a la pantalla para la pantalla de la audiencia.
16. Cierre la función 'init'
Las últimas configuraciones se agregan para la inicialización de la escena. Se establecen los parámetros para el procesamiento posterior, se llama la configuración de las ondas y se agrega un escuchador de eventos para cada vez que se cambia el tamaño del navegador. Esto permite que la pantalla se actualice para adaptarse a las nuevas dimensiones.
17. Configure las olas.
Las olas se crean ahora para la superficie del líquido. Esto se hace moviéndose a través de cada vértice de la geometría del piso en el eje X y Z y moviéndolo hacia arriba en el eje Y. En esta etapa el '
por
'Los bucles se crean para el eje X y Z.
Function Setwaves () {
STEPCOUNT ++;
movergroup.position.z = -Move_spd;
var i, ipos;
var offset = STEPCOUNT * Move_spd / Floor_Depth * Floor_res;
para (i = 0; i & lt; floor_res + 1; i ++) {
para (var j = 0; j & lt; floor_res + 1; j ++) {
ipos = i + offset;
18. Hacer olas.
No todos los vértices se escalarán de la misma manera. Los más alejados de la cámara serán grandes, entonces los lados serán un poco menos, y los más cercanos a la cámara se escalarán menos. Esto hace que la espalda y los lados sea un poco más interesantes de mirar.
Cuando se cambia la ventana, la función aquí se llama desde el oyente que se configuró en el Paso 16. La cámara, el renderizador y el compositor se reinician aquí para que coincidan con las nuevas dimensiones de la ventana del navegador. La función animada se establece solo en 60 fps, llame a la función Rendering para actualizar la pantalla.
La función de renderizado se llama cada marco. Las luces de puntos se ajustan a órbita en la escena y la cámara se coloca de acuerdo con el movimiento del mouse, con un poco de flexión para que se mueva gradualmente en su lugar. La cámara está configurada para mirar siempre el centro de la escena.
[dieciséis]
De vez en cuando uno de los efectos de procesamiento posterior ejecuta un efecto de falla en la pantalla solo para animarse y distorsionar la pantalla, antes de volver a la normalidad.
En el paso final, las partículas se mueven hacia adelante en su vértice individual, y si llegan a la cámara, se colocan de nuevo en la distancia. Esto se actualiza y el '
Setwaves '
La función se llama para hacer que las olas se vuelvan hacia adelante. La escena es traducida por el compositor de efectos.
