app.js

import Gl from './index'
import Plane from './Plane'

const elems = qsa('.js-plane')
elems.forEach(el => {
  new Plane(el)
})

GlObject.js

export default class extends THREE.Object3D {
  
  init(el) {
    this.el = el
    
    this.resize()
  }
  
  resize() {
    this.rect = this.el.getBoundingClientRect()
    const { left, top, width, height } = this.rect

    this.pos = {
      x: (left + (width / 2)) - (store.bounds.ww / 2),
      y: (top + (height / 2)) - (store.bounds.wh / 2)
    }
    
    this.position.y = this.pos.y
    this.position.x = this.pos.x
  }
  
  updatePosition(current) {
    current && (this.position.y = current - this.pos.x)
  }
}

index.js

export default new class {
  
  constructor() {
    this.scene = new THREE.Scene()
    
    this.camera = new THREE.OrthographicCamera(
      store.bounds.ww / - 2, 
      store.bounds.ww / 2, 
      store.bounds.wh / 2, 
      store.bounds.wh / - 2, 
      1, 
      10 
    )
    this.camera.lookAt(this.scene.position)
    this.camera.position.z = 1
    
    this.renderer = new THREE.WebGLRenderer({
      alpha: true,
      antialias: true
    })
    this.renderer.setPixelRatio(1.5)
    this.renderer.setSize(store.bounds.ww, store.bounds.wh)
    this.renderer.setClearColor(0xffffff, 0)
    
    this.init()
  }
  
  render() {
    this.renderer.render(this.scene, this.camera)
  }
  
  run = ({ current }) => {
    for (let i = 0; i < this.scene.children.length; i++) {
      const plane = this.scene.children[i]
      plane.updatePosition(current)
    }
    
    this.render() 
  }
  
  addEvents() {
    Events.on('tick', this.run) 
  }
  
  init() {
    const domEl = this.renderer.domElement
    domEl.classList.add('dom-gl')  
    document.body.appendChild(domEl)
    
    this.addEvents()
  }
}

Plane.js

import Gl from './index'
import GlObject from './GlObject'
import { fragmentShader, vertexShader } from './shaders'

const planeGeo = new THREE.PlaneBufferGeometry(1, 1, 1, 1)
const planeMat = new THREE.ShaderMaterial({
  fragmentShader,
  vertexShader
})

const loader = new THREE.TextureLoader()

export default class extends GlObject {
  
  init(el) {
    super.init(el)

    this.geo = planeGeo
    this.mat = planeMat.clone()
    
    this.mat.uniforms = {
      uTexture: { value: 0 }
    }

    this.img = this.el.querySelector('img')
    this.texture = loader.load(this.img.src, (texture) => {
      texture.minFilter = THREE.LinearFilter
      texture.generateMipmaps = false
      
      this.mat.uniforms.uTexture.value = texture
    })

    this.mesh = new THREE.Mesh(this.geo, this.mat)
    this.mesh.scale.set(this.rect.width, this.rect.height, 1)
    this.add(this.mesh)    
    
    Gl.scene.add(this)
  }
}

shaders.js

export const vertexShader = `
precision mediump float;

varying vec2 vUv;

void main(){
  vec3 pos = position;

  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.);
}
`

export const fragmentShader = `
precision mediump float;

uniform sampler2D uTexture;

varying vec2 vUv;

void main() {
  vec2 uv = vUv;

  vec4 texture = texture2D(uTexture, uv);

  gl_FragColor = texture;
}
`