import * as THREE from 'three';

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

  const manager = new THREE.LoadingManager(createworld);
  const loader = new THREE.TextureLoader(manager);
  texture1 = loader.load("crate.jpg");
  texture2 = loader.load("cardboard.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);
  const material = new THREE.MeshStandardMaterial({map: texture1});
  mesh = new THREE.Mesh(geometry, material);
  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);
  canvas.addEventListener("click", changeTexture);
}
function changeTexture() {
  mesh.material.map = (mesh.material.map === texture1) ? texture2 : texture1;
  mesh.material.needsUpdate = true;
  renderer.render(scene, camera);
}
function move(event) {
  mesh.rotation.z = -event.pageX * 0.01;
  mesh.rotation.x = event.pageY * 0.01;
  renderer.render(scene, camera);
}
window.addEventListener("DOMContentLoaded", initiate);