basic.html

<%- include('header.html'); -%>
<script type="text/javascript" src="/js/light-reactive-screen.js"></script>
<script type="text/javascript" src="/js/sky.js"></script>
<div id="loader" class="loading">
  <div class="spinner">
    <div class="mask">
      <div class="maskedCircle"></div>
    </div>
  </div>
</div>

<canvas id="dominent-color"></canvas>

<div id="play" class="play-button"></div>

<script type="text/javascript">
  var renderer,
    scene,
    camera,
    controls,
    light,
    sky;

  var vimeoPlayer;

  var cubemap = new THREE.CubeTextureLoader();

  function init() {
    scene = new THREE.Scene();

    // Setup camera
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .01, 1000);
    camera.position.set(0, 1, 10);

    sky = new THREE.Sky();
    sky.scale.setScalar( 450000 );
    scene.add( sky );

    // Setup light
    light = new THREE.PointLight(0x000000, 1.0, 100);
    light.position.set(0, 2, 0);
    scene.add(light);

    // Setup renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.toneMapping = THREE.LinearToneMapping;
    document.getElementById('container').appendChild(renderer.domElement);

    // Setup controls
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.target.set(0, 1, -1.0);
    controls.update();


    // Load the ground enviorment map
    envMap = cubemap.setPath('/images/env_cubemap/').load([
      'face-b.jpg',
      'face-d.jpg',
      'face-l.jpg',
      'face-f.jpg',
      'face-r.jpg',
      'face-t.jpg'
    ]);
    // Load the ground model
    var loader = new THREE.GLTFLoader();
    loader.load('/models/terrain.gltf', function (model) {
      model.scene.children[2].scale.set(10, 10, 10);
      model.scene.children[2].position.y = -1;
      model.scene.children[2].material.metalness = 1.0;
      model.scene.children[2].material.envMap = envMap;
      model.scene.children[2].material.envMapIntensity = 5.0;
      scene.add(model.scene);
    })

    // Create a new Vimeo Player and set the video
    vimeoPlayer = new Vimeo.Player(296928206, { autoplay: false });
    vimeoPlayer.load();
    // videoLoad is fired when ready to apply the video texture to a mesh 
    vimeoPlayer.on('videoLoad', function (videoTexture) {
      showPlayButton();
      var screenScaler = 10;
      var height = screenScaler * (vimeoPlayer.getHeight() / vimeoPlayer.getWidth())
      var geometry = new THREE.PlaneGeometry(screenScaler, height, 1);
      var material = new THREE.MeshBasicMaterial({ map: videoTexture, side: THREE.DoubleSide });
      var plane = new THREE.Mesh(geometry, material);
      plane.position.set(-2, height / 2 - 0.5, 0);
      scene.add(plane);
    });
    setupEvents();
    animate();
  }

  function animate() {
    renderer.setAnimationLoop(render);
  }

  function render() {

    if (vimeoPlayer.texture) {
      light.color = getFloorColor(vimeoPlayer.texture.image)
    }
    renderer.render(scene, camera);
  }

  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }

  function showPlayButton() {
    document.getElementById('loader').style.display = 'none';
    document.getElementById('play').style.display = 'block';
  }

  function setupEvents() {
    document.getElementById('play').addEventListener('click', playVideo, false);
    window.addEventListener('resize', onWindowResize, false);
  }



  function playVideo() {
    vimeoPlayer.play();
    document.getElementById('play').style.display = 'none';
  }

  init();
</script>

<%- include('footer.html'); -%>