<canvas class="webgl"></canvas>
<section class="scene_1">
  <div class="section-title">
    <h1 class="title">
      KONG
      <span class="txt-sm">vs.</span>
      GODZILLA
    </h1>
  </div>
</section>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100vh;
  font-family: "Poppins";
}

.webgl {
  position: fixed;
  top: 0;
  left: 0;
  outline: none;
}
.scene_1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  background-size: 300%;
  background-image: linear-gradient(
    238deg,
    rgba(3, 0, 36, 1) 0%,
    rgba(8, 7, 124, 1) 29%,
    rgba(96, 9, 159, 1) 50%,
    rgba(8, 7, 124, 1) 72%,
    rgba(2, 0, 36, 1) 100%
  );
  animation: bg-animation 2s infinite alternate;
}
@keyframes bg-animation {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}

.section-title {
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 100%;
  transform: translate(-50%, 0%);
  z-index: 1;
}
.title {
  font-family: "Bowlby One", cursive;
  font-size: 13vh;
  line-height: 0.7em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-shadow: 6px 6px black;
  mix-blend-mode: multiply;
}
.txt-sm {
  display: block;
  font-size: 6vh;
}
// Texture loader
const loader = new THREE.TextureLoader();
const kingKong = loader.load("https://i.imgur.com/VFIdMm1.png");
const kingKong_grey = loader.load("https://i.imgur.com/bBIcSAI.png");
const kingKong_alpha = loader.load("https://i.imgur.com/bBIcSAI.png");

const godzilla = loader.load("https://i.imgur.com/N52db3p.png");
const godzilla_grey = loader.load("https://i.imgur.com/LWSKBtk.png");
const godzilla_alpha = loader.load("https://i.imgur.com/LWSKBtk.png");

const bg = loader.load("https://i.imgur.com/rUHTXyK.png");

// Debug
const gui = new dat.GUI();

// Canvas
const canvas = document.querySelector("canvas.webgl");

// Scene
const scene = new THREE.Scene();
scene.background = bg;

// Objects kingkong
const geometry = new THREE.PlaneBufferGeometry(3.5, 4, 64, 64);

// Materials kingkong
const material = new THREE.MeshStandardMaterial({
  color: "grey",
  map: kingKong,
  displacementMap: kingKong_grey,
  displacementScale: 0.3,
  alphaMap: kingKong_alpha,
  transparent: true
});

// Objects godzilla
const geometry_god = new THREE.PlaneBufferGeometry(5, 3.5, 80, 40);

// Materials godzilla
const material_god = new THREE.MeshStandardMaterial({
  color: "grey",
  map: godzilla,
  displacementMap: godzilla_grey,
  displacementScale: 0.3,
  alphaMap: godzilla_alpha,
  transparent: true
});

// Mesh
const plane = new THREE.Mesh(geometry, material);
const plane_god = new THREE.Mesh(geometry_god, material_god);
scene.add(plane);
scene.add(plane_god);
plane.position.x = 1.8;
plane.position.y = -0.2;
plane.rotation.x = 0;
plane.rotation.y = 0.2;

plane_god.position.x = -2.8;
plane_god.position.y = -0.6;
// Mes GUI
gui.add(plane.rotation, "x").min(-0.2).max(0.3);
gui.add(plane.rotation, "y").min(-0.2).max(0.3);

// Lights
const pointLight = new THREE.PointLight(0xffffff, 2);
pointLight.position.x = 2;
pointLight.position.y = 3;
pointLight.position.z = 5;
scene.add(pointLight);
// Lights GUI
// gui.add(pointLight.position, "x");
// gui.add(pointLight.position, "y");
// gui.add(pointLight.position, "z");

/**
 * Sizes
 */
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
};

window.addEventListener("resize", () => {
  // Update sizes
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  // Update camera
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  // Update renderer
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.1,
  100
);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 3;
// z 數值越大,相機越遠
scene.add(camera);

// Controls
// const controls = new OrbitControls(camera, canvas)
// controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  alpha: true
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

/**
 * Animate
 */

document.addEventListener("mousemove", animateKingKong);

let mouseX = 0;
let mouseY = 0;

function animateKingKong(event) {
  mouseX = event.clientX;
  mouseY = event.clientY;
}

const clock = new THREE.Clock();

const tick = () => {
  const elapsedTime = clock.getElapsedTime();

  // Update objects
  // sphere.rotation.y = .5 * elapsedTime

  // Update Orbital Controls
  // controls.update()
  plane.rotation.y = mouseX * 0.00003;
  plane.rotation.x = mouseY * 0.00003;

  plane_god.rotation.x = mouseY * 0.00003;
  plane_god.rotation.y = mouseX * 0.00003;

  // Render
  renderer.render(scene, camera);

  // Call tick again on the next frame
  window.requestAnimationFrame(tick);
};

tick();

External CSS

  1. https://fonts.googleapis.com/css2?family=Bowlby+One&amp;display=swap

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js