4dkankan_official/src/components/wave/operators-particles.js

/* eslint-disable */
require('./three')

var runAnimation = true
function init(dom) {
  var SEPARATION = 80,
    AMOUNTX = 100,
    AMOUNTY = 30;

  var container, stats;
  var camera, scene, renderer;

  var particles, particle, count = 0;

  var mouseX = 0,
    mouseY = -190;

  var windowHalfX = window.innerWidth;
  var windowHalfY = 300;

  function init(container) {
    console.log(container)

    // container = $("#operaters .hero");

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / 300, 10, 5000);
    camera.position.z = 900;

    scene = new THREE.Scene();

    particles = new Array();

    var PI2 = Math.PI * 2;
    var material = new THREE.SpriteCanvasMaterial({

      color: 0x696969,
      program: function (context) {

        context.beginPath();
        context.arc(0, 0, 0.5, 0, PI2, true);
        context.fill();

      }

    });

    var i = 0;

    for (var ix = 0; ix < AMOUNTX; ix++) {

      for (var iy = 0; iy < AMOUNTY; iy++) {

        particle = particles[i++] = new THREE.Sprite(material);
        particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
        particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
        scene.add(particle);

      }

    }

    renderer = new THREE.CanvasRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, 300);
    renderer.setClearColor(0xffffff);

    container.appendChild(renderer.domElement)
  }

  function onWindowResize() {

    windowHalfX = window.innerWidth;
    windowHalfY = 300;

    camera.aspect = window.innerWidth / 300;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, 300);

  }

  function animate() {
    if (runAnimation) {
      requestAnimationFrame(animate);
      render();
    }
  }

  function render() {
    camera.position.x += (mouseX - camera.position.x) * .05;
    camera.position.y += (-mouseY - camera.position.y) * .05;
    camera.lookAt(scene.position);

    var 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) * 10);
        particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 4 +
          (Math.sin((iy + count) * 0.5) + 1) * 3;

      }

    }

    renderer.render(scene, camera);

    count += 0.1;

  }
  init(dom);
  animate();
  window.addEventListener('resize', onWindowResize)
  window.___resize = onWindowResize
}

export default {
  init(dom) {
    runAnimation = true;
    init(dom)
  },
  destroyed() {
    runAnimation = false;
    window.removeEventListener('resize', window.___resize)
  }
}

/* eslint-enable */