BackgroundHero.js

export default {
  init () {
    let SEPARATION = 80, AMOUNTX = 40, AMOUNTY = 30
    let container
    let camera, scene, renderer
    let particles, particle, count = 0
    let mouseX = 0, mouseY = 0
    let windowHalfX = window.innerWidth / 4
    let windowHalfY = window.innerHeight / 4

    init()
    animate()

    function init () {
      container = document.querySelector('.js-hero-image')
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000)
      camera.position.z = 10000

      scene = new THREE.Scene()

      particles = new Array()

      let PI2 = Math.PI * 2
      let material = new THREE.ParticleCanvasMaterial({
 
            color: '#434a54',
            program: function(context) {
 
                context.beginPath();
                context.arc(0, 0, .6, 0, PI2, true);
                context.fill();
 
            }
 
        });
      console.log(material)
      let i = 0

      for (let ix = 0; ix < AMOUNTX; ix++) {
        for (let iy = 0; iy < AMOUNTY; iy++) {
          particle = particles[ i++ ] = new THREE.Particle(material)
          particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2)
          particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2)
          scene.add(particle)
        }
      }
      console.log(scene)
      renderer = new THREE.CanvasRenderer()

      renderer.setSize(window.innerWidth, window.innerHeight)
      container.appendChild(renderer.domElement)


      window.addEventListener('resize', onWindowResize, false)
    }

    function onWindowResize () {
      windowHalfX = window.innerWidth / 2
      windowHalfY = window.innerHeight / 2

      camera.aspect = window.innerWidth / window.innerHeight
      camera.updateProjectionMatrix()

      renderer.setSize(window.innerWidth, window.innerHeight)
    }

    function animate () {
      setTimeout(function() {
        requestAnimationFrame(animate)
        // animating/drawing code goes here
      }, 1000 / 45)

      render()
      //stats.update()
    }

    function render () {
      camera.position.set(0, 355, 122)

      let i = 0

      for (var ix = 0; ix < AMOUNTX; ix++) {
 
            for (var iy = 0; iy < AMOUNTY; iy++) {
 
                particle = particles[i++];
                particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);
                particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 2 + (Math.sin((iy + count) * 0.5) + 1) * 2;
 
            }
 
        }

      renderer.render(scene, camera)

      count += 0.1
    }
  }
}