import * as THREE from 'three';

let canvas, renderer, scene, camera, mesh, materials;
function initiate() {
  canvas = document.getElementById("canvas");

  const manager = new THREE.LoadingManager(createworld);
  const loader = new THREE.TextureLoader(manager);
  materials = [
    new THREE.MeshStandardMaterial({map: loader.load("dice3.jpg")}),
    new THREE.MeshStandardMaterial({map: loader.load("dice4.jpg")}),
    new THREE.MeshStandardMaterial({map: loader.load("dice5.jpg")}),
    new THREE.MeshStandardMaterial({map: loader.load("dice2.jpg")}),
    new THREE.MeshStandardMaterial({map: loader.load("dice1.jpg")}),
    new THREE.MeshStandardMaterial({map: loader.load("dice6.jpg")})
  ];
}
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, 150);

  const geometry = new THREE.BoxGeometry(50, 50, 50);
  mesh = new THREE.Mesh(geometry, materials);
  scene.add(mesh);

  const light = new THREE.SpotLight(0xFFFFFF, 3);
  light.decay = 0;
  light.position.set(0, 100, 250);
  scene.add(light);
  renderer.render(scene, camera);

  canvas.addEventListener("mousemove", move);
}
function move(event){
  mesh.rotation.x = event.pageY * 0.01;
  mesh.rotation.z = -event.pageX * 0.01;
  renderer.render(scene, camera);
}
window.addEventListener("DOMContentLoaded", initiate);