const THREE = require('three')
const shader = require('./shader')


let renderer = null
let scene = null
let camera = null
let mesh = null
let material = null

let w = window.innerWidth
let h = window.innerHeight
let time = 0.0
let scroll = 0.0


function render(){

  time += 0.001

  material.uniforms.u_time.value = time
  material.uniforms.u_scroll.value = window.pageYOffset / (document.documentElement.scrollHeight - h)

  renderer.render(scene, camera)

  requestAnimationFrame( render )
}


function start(){
  renderer = new THREE.WebGLRenderer()
  renderer.setSize(w,h)

  renderer.domElement.style.position = 'fixed'
  renderer.domElement.style.top = 0
  renderer.domElement.style.left = 0

  document.body.appendChild(renderer.domElement)
  document.body.style.height = '5000px'

  scene = new THREE.Scene()

  camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000)

  const geometry = new THREE.PlaneGeometry(32,32,1)

  const loader = new THREE.TextureLoader()

  material = new THREE.ShaderMaterial({
    uniforms: shader.uniforms,
    vertexShader: shader.vertexShader,
    fragmentShader: shader.fragmentShader
  })


  material.uniforms.u_resolution.value = new THREE.Vector2(w,h)

  loader.load(
    'monkey.png',
    texture => {
      //texture.wrapS = texture.wrapT = THREE.RepeatWrapping
      material.uniforms.u_texture.value = texture
    }
  )

  mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  camera.position.z = 5

  render()
}


start()