<div id="container">
  <!-- This div will hold our scene-->
</div>

body {
  background-color: #000;
  margin: 0px;
  overflow: hidden;
  color: white;
  text-align: center;
}

a {
  color: white;
}
a:hover{
  color: red;
}

.title {
  position: absolute;
  width: 100%;
  z-index: 1;
}

#container {
  position: absolute;
  width: 100%;
  height: 100%;
}

// these need to be accessed inside more than one function so we'll declare them first
let container;
let camera;
let renderer;
let material;
let scene;
let controls;
let mesh;
const mixers = [];
const clock = new THREE.Clock();

function init() {

  // Get a reference to the container element that will hold our scene
  container = document.querySelector( '#container' );

  // create a Scene
  scene = new THREE.Scene();
  // Set the background color
  scene.background = new THREE.Color( 0x8FBCD4 );

  initCamera();
  initControls();
  initLights();
  initRenderer();
  loadModels();
  // start the animation loop
  renderer.setAnimationLoop( () => {
    update();
    render();

  } );
}

function initCamera() {

   camera = new THREE.PerspectiveCamera( 35, container.clientWidth / container.clientHeight, 1, 1000 );
  camera.position.set( -2, 2, 35 );

}

function initLights() {

 const ambientLight = new THREE.AmbientLight( 0xffffff, 1 );
  scene.add( ambientLight );

  const frontLight = new THREE.DirectionalLight( 0xffffff, 1 );
  frontLight.position.set( 10, 10, 10 );

  const backLight = new THREE.DirectionalLight( 0xff0000, 1 );
  backLight.position.set( -10, 10, -10 );
  
  scene.add( frontLight, backLight );

}
function initControls() {

  controls = new THREE.OrbitControls( camera, container );

}
function loadModels() {

  const loader = new THREE.GLTFLoader();

  // A reusable function to setup the models. We're passing in a position parameter
  // so that they can be individually placed around the scene
  const onLoad = ( gltf, position ) => {
    
    console.log(gltf);
    const model0 = gltf.scene.children[ 0 ];
    const model1 = gltf.scene.children[ 1 ];
    const model2 = gltf.scene.children[ 2 ];
    const model3 = gltf.scene.children[ 3 ];
    const circle = gltf.scene.children[ 4 ];
    const plane = gltf.scene.children[ 5 ];
    console.log(model2);
    console.log(circle);
    console.log(plane.children[0].material);
     plane.children[0].material.side = THREE.DoubleSide;
     circle.material = new THREE.MeshLambertMaterial({
      ambient: '#009edc',
      color: '#009edc',
      transparent: true,
      side:THREE.DoubleSide
    });
    scene.add( model0,model1,model2,model3,circle,plane );

  };

  // the loader will report the loading progress to this function
  const onProgress = () => {};

  // the loader will send any error messages to this function, and we'll log
  // them to to console
  const onError = ( errorMessage ) => { console.log( errorMessage ); };

  // load the first model. Each model is loaded asynchronously,
  // so don't make any assumption about which one will finish loading first
  const parrotPosition = new THREE.Vector3( 0, 0, 0 );
  loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/939680/majoramaskblend.glb', gltf => onLoad( gltf, parrotPosition ), onProgress, onError );

}

function initRenderer() {

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( container.clientWidth, container.clientHeight );

  renderer.setPixelRatio( window.devicePixelRatio );

  // add the automatically created <canvas> element to the page
  container.appendChild( renderer.domElement );

}

function render() {

  renderer.render( scene, camera );

}

function update() {

  const delta = clock.getDelta();


}

function onWindowResize() {

  // set the aspect ratio to match the new browser window aspect ratio
  camera.aspect = container.clientWidth / container.clientHeight;
  // update the camera's frustum
  camera.updateProjectionMatrix();

  // update the size of the renderer AND the canvas
  renderer.setSize( container.clientWidth, container.clientHeight );

}

window.addEventListener( 'resize', onWindowResize );


// call the init function to set everything up
init();