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

/*
  INFORMATION
*/
// Class for the experiment
class GettingStarted {
  constructor(){
    // RENDERER //////////////////////////////////////////////////
    //Setting 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 /////////////////////////////////////////////////
    //Creating an empty scene
    this.scene = new THREE.Scene();

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

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

    // LIGHTS 
   /////////////////////////////////////////////////
    //ambient lighting 
    const ambientLight = new THREE.AmbientLightProbe(0xffffff, 0.5);
    this.scene.add(ambientLight);
    
    // directional lighting
    const dirLight = new THREE.DirectionalLight(0xffffff, 1);
    dirLight.position.set(1,0,0);
    this.scene.add(dirLight);
    this.time=0;
  }
  //Starting the composition ( only called once at the start ) ///////////////////////////////////////
  start(){
    // BUILDING THE COMPOSITION //////////////////////////////////////////////
    //Creating an objet from a geometry and a material
    const geometry = new THREE.BoxGeometry( 2, 2, 2 );
    const material = new THREE.MeshStandardMaterial( {
        color: 0xffffff
    } );
    this.objCube = new THREE.Mesh( geometry, material );
    // tilt the cube slightly
    this.objCube.rotateX(0.3);
    // make sure to add the object to the scene so we can see it
    this.scene.add( this.objCube );
  }
  
  // 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){
    
    this.objCube.rotation.y+=dt;
    // render the scene ( 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 );