import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

let canvas, renderer, scene, camera, mesh;
function initiate() {
  canvas = document.getElementById("canvas");
  const loader = new GLTFLoader();
  loader.load("police.glb", createworld);
}
function createworld(gltf) {
  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);

  mesh = gltf.scene;
  mesh.scale.set(0.02, 0.02, 0.02);
  scene.add(mesh);

  const light = new THREE.PointLight(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.y = -event.pageX * 0.01;
  renderer.render(scene, camera);
}
window.addEventListener("DOMContentLoaded", initiate);