Akhirnya kita sampai dari tujuan tutorial ini, yaitu membuat halaman HTML lebih menarik dengan menggunakan animasi dari WebGL menggunakan three.js.
Hasil akhir dari project ini adalah image akan memiliki efek ripple seperti gelombang air.
Pertama buka file index.html, lalu ganti dengan code dibawah
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Playfair+Display&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<div data-scroll>
<div class="page">
<header>
<h1>Bali Beach</h1>
<img src="img/header.jpg" alt="">
</header>
<!-- BEGIN grid -->
<div class="grid">
<!-- BEGIN item -->
<a href="#" class="item item_v">
<div class="item__image">
<img src="img/1.jpg" alt="">
<div class="item__meta">December 23, 2020</div>
</div>
<h2 class="item__title">Karma Beach</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias deserunt, delectus dolorem repudiandae eaque, nisi ex qui doloremque.</p>
</a>
<!-- END item -->
<!-- BEGIN item -->
<a href="#" class="item item_h">
<div class="item__image">
<img src="img/2.jpg" alt="">
<div class="item__meta">December 01, 2020</div>
</div>
<h2 class="item__title">Bali Beach</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit illo consequatur, incidunt aut officia qui perferendis sunt.</p>
</a>
<!-- END item -->
<!-- BEGIN item -->
<a href="#" class="item item_h">
<div class="item__image">
<img src="img/4.jpg" alt="">
<div class="item__meta">November 26, 2020</div>
</div>
<h2 class="item__title">Lorem lorem</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</a>
<!-- END item -->
<!-- BEGIN item -->
<a href="#" class="item item_v">
<div class="item__image">
<img src="img/3.jpg" alt="">
<div class="item__meta">November 03, 2020</div>
</div>
<h2 class="item__title">Lorem ipsum</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</a>
<!-- END item -->
<!-- BEGIN item -->
<a href="#" class="item item_v">
<div class="item__image">
<img src="img/1.jpg" alt="">
<div class="item__meta">October 05, 2020</div>
</div>
<h2 class="item__title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe illo asperiores nam molestias corporis perspiciatis.</p>
</a>
<!-- END item -->
<!-- BEGIN item -->
<a href="#" class="item item_h">
<div class="item__image">
<img src="img/2.jpg" alt="">
<div class="item__meta">July 27, 2020</div>
</div>
<h2 class="item__title">Lorem Ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis alias, aliquam voluptatibus doloribus.</p>
</a>
<!-- END item -->
<!-- BEGIN item -->
<a href="#" class="item item_h">
<div class="item__image">
<img src="img/4.jpg" alt="">
<div class="item__meta">August 18, 2020</div>
</div>
<h2 class="item__title">Lorem Ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</a>
<!-- END item -->
<!-- BEGIN item -->
<a href="#" class="item item_v">
<div class="item__image">
<img src="img/3.jpg" alt="">
<div class="item__meta">June 01, 2020</div>
</div>
<h2 class="item__title">Lorem Ipsum</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus, animi eos repellendus quaerat.</p>
</a>
<!-- END item -->
</div>
<!-- END grid -->
<!-- BEGIN footer -->
<footer class="footer">
<p>© Lorem 2021</a></p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</footer>
<!-- END footer -->
</div>
<!-- end page -->
</div>
<!-- end scroll -->
</main>
<div id="container"></div>
<script src="js/app.js"></script>
</body>
</html>
Tambahkan direktori css, lalu tambahkan css rule berikut:
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Open Sans', sans-serif;
}
.page{
width: min(90%, 1200px);
margin: 0 auto;
/* border: 1px solid #000; */
}
/* header */
header{
margin-bottom: 5em;
position: relative;
}
h1{
font-size: 260px;
line-height: 1;
padding: 0.5em 0 ;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: #047582;
mix-blend-mode: color-burn;
font-size: 18vw;
}
header img{
max-width: 100%;
display: block;
}
h1,h2{
font-family: 'Playfair Display', serif;
font-weight: normal;
}
/* grid */
.grid{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 2em 0
}
.item{
/* border: 1px solid #000; */
align-self: center;
justify-self: center;
text-decoration: none;
color: #333;
}
.item:nth-child(odd){
justify-self: start;
}
.item:nth-child(even){
justify-self: end;
}
.item img{
width: 100%;
display: block;
/* opacity: 0; */
}
.item__image{
position: relative;
margin-bottom: 0.6em;
}
.item__meta{
position: absolute;
left: -0.4em;
bottom: 0.4em;
transform-origin: 0 100%;
transform: rotate(-90deg);
text-transform: uppercase;
font-size: 80%;
}
.item__title{
font-size: 40px;
line-height: 1.2;
margin-bottom: 0.4em;
}
.item_p{
line-height: 1.4;
font-size: 1em;
}
.item_h{
width: 100%;
}
.item_v{
width: 80%;
}
/* footer */
.footer{
border-top: 1px solid #ccc;
padding: 1em;
font-size: 15px;
display: flex;
margin-top: 8em;
line-height: 1.5;
padding: 1em 0 4em 0;
}
.footer a{
color: #333;
}
.footer p+p{
margin-left: auto;
text-align: right;
}
@media screen and (max-width: 600px) {
.grid{
display: block;
}
.item_v,.item_h{
width: auto;
margin-bottom: 3em;
}
.item img{
width: 100%;
max-width: none;
}
}
#container{
height: 100vh;
width: 100vw;
position: fixed;
z-index: -1;
top: 0;
left: 0;
}
Download image di https://drive.google.com/file/d/17iDx1Cnyh7_iEe5q4em25rIVXEG-qrNR/view?usp=sharing
Lalu buat direktori img, kemudian ekstrak file image yang sudah didownload dan simpan didalam direktori img.
Untuk menyamakan status terakhir, ubah code untuk file js berikut.
file src/app.js
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import fragment from './shaders/fragment.glsl';
import vertex from './shaders/vertex.glsl';
import ocean from './../img/ocean.jpg';
export default class Sketch{
constructor(opt){
this.time = 0;
this.container = opt.dom;
this.scene = new THREE.Scene();
this.width = this.container.offsetWidth;
this.height = this.container.offsetHeight;
this.camera = new THREE.PerspectiveCamera( 70, this.width / this.height, 0.01, 10 );
this.camera.position.z = 1;
this.renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
});
this.container.appendChild( this.renderer.domElement );
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.resize();
this.setupResize();
this.addObject();
this.render();
}
setupResize(){
window.addEventListener('resize', this.resize.bind(this));
}
resize(){
this.width = this.container.offsetWidth;
this.height = this.container.offsetHeight;
this.renderer.setSize (this.width, this.height);
this.camera.aspect = this.width/this.height;
this.camera.updateProjectionMatrix();
}
addObject(){
this.geometry = new THREE.PlaneBufferGeometry( 100, 100, 10, 10 );
this.material = new THREE.MeshNormalMaterial();
this.material = new THREE.ShaderMaterial({
uniforms:{
time: {value: 0},
oceanTexture: {value: new THREE.TextureLoader().load(ocean)},
},
side: THREE.DoubleSide,
fragmentShader: fragment,
vertexShader: vertex,
wireframe: true,
});
this.mesh = new THREE.Mesh( this.geometry, this.material );
this.scene.add( this.mesh );
}
render(){
this.time+=0.05;
this.mesh.rotation.x = this.time / 2000;
this.mesh.rotation.y = this.time / 1000;
this.material.uniforms.time.value = this.time;
this.renderer.render( this.scene, this.camera );
window.requestAnimationFrame(this.render.bind(this));
}
}
new Sketch({
dom: document.getElementById('container')
});
file src/shaders/vertex.glsl
// Classic Perlin 3D Noise
// by Stefan Gustavson
//
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
float cnoise(vec3 P){
vec3 Pi0 = floor(P); // Integer part for indexing
vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
Pi0 = mod(Pi0, 289.0);
Pi1 = mod(Pi1, 289.0);
vec3 Pf0 = fract(P); // Fractional part for interpolation
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
vec4 iy = vec4(Pi0.yy, Pi1.yy);
vec4 iz0 = Pi0.zzzz;
vec4 iz1 = Pi1.zzzz;
vec4 ixy = permute(permute(ix) + iy);
vec4 ixy0 = permute(ixy + iz0);
vec4 ixy1 = permute(ixy + iz1);
vec4 gx0 = ixy0 / 7.0;
vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
gx0 = fract(gx0);
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
vec4 sz0 = step(gz0, vec4(0.0));
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
vec4 gx1 = ixy1 / 7.0;
vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
gx1 = fract(gx1);
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
vec4 sz1 = step(gz1, vec4(0.0));
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
g000 *= norm0.x;
g010 *= norm0.y;
g100 *= norm0.z;
g110 *= norm0.w;
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
g001 *= norm1.x;
g011 *= norm1.y;
g101 *= norm1.z;
g111 *= norm1.w;
float n000 = dot(g000, Pf0);
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
float n111 = dot(g111, Pf1);
vec3 fade_xyz = fade(Pf0);
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
return 2.2 * n_xyz;
}
uniform float time;
varying float vNoise;
varying vec2 vUv;
void main() {
vec3 newPos = position;
float noise = cnoise(3.*vec3(position.x, position.y, position.z+time/30.));
//newPos += 0.1*normal*noise;
vNoise = noise;
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( newPos, 1.0 );
}
fie src/shaders/fragment.glsl
varying float vNoise;
varying vec2 vUv;
void main(){
gl_FragColor = vec4(vUv,0.,1.);
}
Jika Anda jalankan parcel index.html, kurang lebih tampilan web akan seperti berikut
