import * as THREE from 'three';

let canvas, video, texture, renderer, scene, camera, mesh;
function initiate() {
  canvas = document.getElementById("canvas");
  video = document.createElement("video");
  video.src = "trailer.mp4";
  video.addEventListener("canplaythrough", createworld);
}
function createworld() {
  const width = canvas.width;
  const height = canvas.height;

  renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
  renderer.setClearColor(0xFFFFFF);
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
  camera.position.set(0, 0, 250);

  texture = new THREE.VideoTexture(video);

  const material = new THREE.MeshStandardMaterial({map: texture, side: THREE.DoubleSide});
  const geometry = new THREE.PlaneGeometry(240, 135);
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  const light = new THREE.PointLight(0xffffff, 3);
  light.decay = 0;
  light.position.set(0, 100, 250);
  scene.add(light);

  canvas.addEventListener("mousemove", move);
  canvas.addEventListener("click", playVideo);
  render();
}
function playVideo() {
  if (!video.paused && !video.ended) {
    video.pause();
  } else {
    video.play();
  }
}
function move(event) {
  mesh.rotation.y = event.pageX * 0.02;
}
function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
window.addEventListener("DOMContentLoaded", initiate);