import * as THREE from 'three';

let renderer, scene, camera, mesh;
function initiate() {
  const canvas = document.getElementById("canvas");
  const width = canvas.width;
  const height = canvas.height;
  renderer = new THREE.WebGLRenderer({canvas: canvas});
  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.MeshBasicMaterial({color: 0x000000, wireframe: true});
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  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);