import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js'

/*
  INFORMATION
*/
// Class for the experiment
class GettingStarted {
  constructor(){
    // RENDERER //////////////////////////////////////////////////
    // Set up the renderer
    this.renderer = new THREE.WebGLRenderer({canvas: document.querySelector('#bg')});
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(window.innerWidth, window.innerHeight);

    // SCENE /////////////////////////////////////////////////
    // Create an empty scene
    this.scene = new THREE.Scene();

    // CAMERA ////////////////////////////////////////////////
    // Create camera
    this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);

    // Position camera
    this.camera.position.set( 0, 0, 10 );
    

    // LIGHTS 
   /////////////////////////////////////////////////
    // Set up ambient light 
    const ambientLight = new THREE.AmbientLightProbe(0xffffff, 0.5);
    this.scene.add(ambientLight);
    
    // Set up directional light
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(1,0,0);
    this.scene.add(directionalLight);
                   
    // Initialize the time variable for animation purposes              
    this.time = 0;
  }
  //Starting the composition ( only called once at the start ) ///////////////////////////////////////
  start(){
    // BUILDING THE COMPOSITION //////////////////////////////////////////////
    // Create a cube geometry and a material
    const cubeGeometry = new THREE.BoxGeometry( 2, 2, 2 );
    const cubeMaterial = new THREE.MeshStandardMaterial( {
        color: 0xffffff
    } );
    // Create a cube object mesh
    this.cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
    // Tilt the cube slightly for better viewing
    this.cube.rotateX(0.3);
    // Remember to add the cube object to the scene
    this.scene.add( this.cube );
  }
  
  // Updating the composition ( called every frame, 60fps) put animation / interaction here 
  // dt - time elapsed since last call to update function, in seconds. Should be close to 0.016 if the rendering is at 60FPS
  //////////////////////////////////////////
  update(dt){
    // Increment cube rotation by dt for continuous rotation
    this.cube.rotation.y += dt;
    // Render the scene to the screen ( draw it to the screen )
    this.renderer.render(this.scene, this.camera);
  }
  
} // End of the Class

// Creating the composition
let comp = new GettingStarted();

// Start the composition
comp.start();

// get time at start of animation 
let time=performance.now();
// animation loop
function animate(){
  let oldtime=time;
  // get current time
  time=performance.now();
  // calculate time elapsed since this function was last called
  let dt = (time-oldtime)/1000;
  // update composition's current time
  comp.time+=dt;
  // call composition update function
  comp.update(dt);
  // request an animation frame
  // the browser will call the animate function during its next animation frame, which will normally be 1/60 seconds later for 60FPS rendering speed
  requestAnimationFrame(animate);
}
// starting animation loop
animate();

// update the renderer and camera so that the rendering canvas fills the screen
function windowResize()
{
	var width = window.innerWidth;
	var height = window.innerHeight;
	comp.renderer.setSize( width, height );
	comp.camera.aspect = width / height;
	comp.camera.updateProjectionMatrix();
}
// call the above function whenever the window is resized by the user
window.addEventListener('resize', windowResize );