EffectHub.com: your best source for gaming

Recommendation

More Effects...

(function() {
  var Particles, work;

Particles = class Particles {
    constructor() {
      this.setActors = this.setActors.bind(this);
      this.addStars = this.addStars.bind(this);
      this.addKnot = this.addKnot.bind(this);
      this.getTexture = this.getTexture.bind(this);
      this.setLighting = this.setLighting.bind(this);
      this.setStage = this.setStage.bind(this);
      this.rotateRadians = this.rotateRadians.bind(this);
      this.animate = this.animate.bind(this);
      this.render = this.render.bind(this);
      this.setStage();
      this.setLighting();
      this.setActors();
      this.render();
      window.addEventListener("resize", this.render);
    }

setActors() {
      return this.addStars();
    }

addStars() {
      var angle, i, j, k, l, materials, temp_x, temp_y, vertex;
      this.geometry = new THREE.Geometry();
      materials = new THREE.PointsMaterial({
        color: 0xffffff,
        size: 1,
        transparent: true,
        blending: THREE.AdditiveBlending,
        map: this.getTexture(),
        depthTest: false
      });
      for (i = j = 0; j <= 2500; i = ++j) {
        vertex = new THREE.Vector3();
        angle = 0.05 * i;
        temp_x = (1 + angle) * Math.cos(angle) + Math.random();
        temp_y = (1 + angle) * Math.sin(angle) + Math.random() * 0;
        vertex.x = temp_x;
        vertex.y = Math.random() * 1 + 0;
        vertex.z = temp_y;
        this.geometry.vertices.push(vertex);
      }
      for (i = k = 0; k <= 2500; i = ++k) {
        vertex = new THREE.Vector3();
        angle = 0.05 * i;
        temp_x = (1 + angle) * Math.cos(angle + 2) + Math.random();
        temp_y = (1 + angle) * Math.sin(angle + 2) + Math.random();
        vertex.x = temp_x;
        vertex.y = Math.random() * 1 + 0;
        vertex.z = temp_y;
        this.geometry.vertices.push(vertex);
      }
      for (i = l = 0; l <= 7500; i = ++l) {
        vertex = new THREE.Vector3();
        temp_x = Math.random() * 200 - 100;
        temp_y = Math.random() * 200 - 100;
        vertex.x = temp_x;
        vertex.y = Math.random() * 1 + 0;
        vertex.z = temp_y;
        this.geometry.vertices.push(vertex);
      }
      this.starSystem = new THREE.Points(this.geometry, materials);
      this.starSystem.sortParticles = true;
      return this.scene.add(this.starSystem);
    }

addKnot() {
      var materials;
      this.geometry = new THREE.SphereGeometry(1, 50, 50);
      materials = new THREE.PointsMaterial({
        color: 0xffffff,
        size: 1,
        transparent: true,
        blending: THREE.AdditiveBlending,
        map: this.getTexture(),
        depthTest: false
      });
      this.sphereSystem = new THREE.Points(this.geometry, materials);
      this.sphereSystem.sortParticles = true;
      return this.scene.add(this.sphereSystem);
    }

getTexture() {
      var canvas, context, gradient, texture;
      canvas = document.createElement('canvas');
      canvas.width = 32;
      canvas.height = 32;
      context = canvas.getContext('2d');
      gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
      gradient.addColorStop(0, 'rgba(255,255,255,1)');
      gradient.addColorStop(0.2, 'rgba(200,255,255,1)');
      gradient.addColorStop(0.4, 'rgba(0,0,64,1)');
      gradient.addColorStop(1, 'rgba(0,0,0,1)');
      context.fillStyle = gradient;
      context.fillRect(0, 0, canvas.width, canvas.height);
      texture = new THREE.Texture(canvas);
      texture.needsUpdate = true;
      return texture;
    }

setLighting() {
      this.ambientLight = new THREE.AmbientLight("#ffffff", 0.5);
      return this.scene.add(this.ambientLight);
    }

setStage() {
      this.renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById("canvas"),
        antialias: true
      });
      this.renderer.setClearColor("#000000");
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.renderer.shadowMap.enabled = true;
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      this.camera.position.z = 50;
      this.camera.position.y = 50;
      this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
      this.controls.addEventListener('change', this.render);
      return this.controls.target.set(0, 0, 0);
    }

rotateRadians(deg) {
      return deg * (Math.PI / 180);
    }

animate() {
      requestAnimationFrame(this.animate);
      this.controls.update();
      return this.render();
    }

render() {
      return this.renderer.render(this.scene, this.camera);
    }

};

work = new Particles;

}).call(this);

CSS

HTML

Recommendation

Join Effecthub.com