import * as THREE from 'three';

function initiate() {
  const canvas = document.getElementById("canvas");
  const width = canvas.width;
  const height = canvas.height;

  const renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
  renderer.setClearColor(0xFFFFFF);

  const scene = new THREE.Scene();
  const 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({color: 0x0000FF});
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  mesh.rotation.set(10, 10, 0);

  const light = new THREE.SpotLight(0xFFFFFF, 3);
  light.decay = 0;
  light.position.set(50, 50, 150);
  scene.add(light);

  renderer.render(scene, camera);
}
window.addEventListener("DOMContentLoaded", initiate);