EffectHub.com: your best source for gaming

Recommendation

More Effects...

var Vessels = function() {
  this.renderer_ = null;
  
  this.camera_ = null;
  
  this.scene_ = null;
  
  this.composer_ = null;
  
  this.controls_ = null;
  
  this.dust_ = null;
  
  this.stats_ = null;
  
  this.lights_ = [];
  
  this.angle_ = 0;
  
  this.mouseTouchBinding_ = this.mouseTouchListener_.bind(this);
  
  this.userIsMoving_ = false;
  
  this.startAnimatingTimer_ = -1;
  
  this.cameraAnimationInterval_ = -1;
  
  this.rotationCounter_ = 0;
};

Vessels.prototype.init = function () {
  this.scene_ = new THREE.Scene();
  
  this.camera_ = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100000);
  // this.camera_ = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 1, 1000);
  this.camera_.position.z = -30;
  this.camera_.lookAt(new THREE.Vector3(0, 0, 0));
  this.scene_.add(this.camera_);
  
  this.renderer_ = new THREE.WebGLRenderer({
    antialias: false
  });
  this.renderer_.setClearColor(0x160a36);
  
  this.renderer_.setSize(window.innerWidth, window.innerHeight);
  this.renderer_.setPixelRatio(window.devicePixelRatio);
  
  this.dust_ = new Dust(this.renderer_, this.camera_);
  this.scene_.add(this.dust_.mesh);
  
  this.controls_ = new THREE.OrbitControls(this.camera_, this.renderer_.domElement);
  
  
  var light = new THREE.AmbientLight(0xffffff, 0.4);
  this.scene_.add(light);
  
  // var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
  // directionalLight.position.set( 1, 1, 0 );
  // this.scene_.add( directionalLight );
  
  var pLight = new THREE.PointLight(0xffffff, 1, 100);
  this.scene_.add(pLight);
  this.lights_.push(pLight);
  
  var sphereSize = 1;
  // var pointLightHelper = new THREE.PointLightHelper(pLight, sphereSize );
  // this.scene_.add( pointLightHelper );
  
  pLight = new THREE.PointLight(0xffffff, 1, 100);
  this.scene_.add(pLight);
  this.lights_.push(pLight);
  
  // pointLightHelper = new THREE.PointLightHelper( pLight, sphereSize );
  // this.scene_.add( pointLightHelper );
  //
  document.body.appendChild(this.renderer_.domElement);
  
  this.createStar_();

var rect = this.createMultiRectangle_(5, 4, '#cf088a');
  rect.position.x = -7.5;
  
  rect = this.createMultiRectangle_(4.2, 4, '#03a38f');
  rect.position.y = -6.3;
  rect.rotation.z = 1.57;
  rect.scale.y = 1.1;

rect = this.createMultiRectangle_(1.65, 4, '#cf088a');
  rect.position.x = -7.5;

rect = this.createMultiRectangle_(1.65, 4, '#cf088a');
  rect.position.x = 2.5;

rect = this.createMultiRectangle_(1.65, 4, '#03a38f');
  rect.position.y = 2.3;
  rect.rotation.z = 90 * Math.PI / 180;

rect = this.createMultiRectangle_(1.65, 4, '#03a38f');
  rect.position.y = -7.3;
  rect.rotation.z = 90 * Math.PI / 180;
  
  var triangle = this.createTriangle_(3, '#03a38f');
  triangle.rotation.set(0, 0, 34.3 * Math.PI / 180);
  triangle.position.set(7.9, -0.7, 0);
  
  
  triangle = this.createTriangle_(3, '#03a38f');
  triangle.rotation.set(0, 0, 27.5 * Math.PI / 180);
  triangle.position.set(7.9, 2.14, 0);
  
  triangle = this.createTriangle_(3, '#03a38f');
  triangle.rotation.set(0, 0, 94.5 * Math.PI / 180);
  triangle.position.set(-9.3, 1.4, 0);
  
  triangle = this.createTriangle_(3, '#03a38f');
  triangle.rotation.set(0, 0, 88.8 * Math.PI / 180);
  triangle.position.set(-9.3, -1.5, 0);
  
  
  triangle = this.createTriangle_(3, '#cf088a');
  triangle.rotation.set(0, 0, 114.5 * Math.PI / 180);
  triangle.position.set(-2.2, 8, 0);
  
  triangle = this.createTriangle_(3, '#cf088a');
  triangle.rotation.set(0, 0, 120.3 * Math.PI / 180);
  triangle.position.set(0.6, 7.8, 0);
  
  triangle = this.createTriangle_(3, '#cf088a');
  triangle.rotation.set(0, 0, 57.2 * Math.PI / 180);
  triangle.position.set(0.6, -7.8, 0);
  
  triangle = this.createTriangle_(3, '#cf088a');
  triangle.rotation.set(0, 0, 63.0 * Math.PI / 180);
  triangle.position.set(-2.2, -7.9, 0);
  
  // this.stats_ = new Stats();
  // this.stats_.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
  // console.log(this.stats_.dom);
  // document.body.appendChild( this.stats_.dom );
  
  document.body.addEventListener('mousedown', this.mouseTouchBinding_, false);
  document.body.addEventListener('touchstart', this.mouseTouchBinding_, false);
  
  this.initVignetteShader_();
  
  this.startAnimatingTimer_ = setTimeout(this.startAnimating_.bind(this), 5000);
  
  this.render_();
};

Vessels.prototype.mouseTouchListener_ = function(e) {
  switch(e.type) {
    case 'mousedown':
      document.body.addEventListener('mouseup', this.mouseTouchBinding_, false);
        
      clearTimeout(this.startAnimatingTimer_);
      this.userIsMoving_ = true;
    break;
    case 'mouseup':
      document.body.removeEventListener('mouseup', this.mouseTouchBinding_, false);
        
      this.startAnimatingTimer_ = setTimeout(this.startAnimating_.bind(this), 5000);
    break;
    case 'touchstart':
      document.body.addEventListener('touchend', this.mouseTouchBinding_, false);
        
      clearTimeout(this.startAnimatingTimer_);
      this.userIsMoving_ = true;
    break;
    case 'touchend':
      document.body.removeEventListener('touchend', this.mouseTouchBinding_, false);
        
      this.startAnimatingTimer_ = setTimeout(this.startAnimating_.bind(this), 5000);
    break;
  }
};

Vessels.prototype.startAnimating_ = function() {
  this.userIsMoving_ = false;
  this.cameraAnimationInterval_ = setInterval(this.animateCameraToRandomPosition_.bind(this), 2000);
};

Vessels.prototype.animateCameraToRandomPosition_ = function() {
  
  if (this.userIsMoving_) {
    clearInterval(this.cameraAnimationInterval_);
    return;
  }
  
  var radius = 30;
  var x = 0;
  var y = 0;
  var z = -radius;
  
  if (this.rotationCounter_ ++ % 10 !== 0) {
    var theta = - (Math.random() * 360 - 180);
    var phi = Math.random() * 360 - 180;
  
    phi = Math.min( 180, Math.max( 0, phi ) );
  
    x = radius * Math.sin( theta * Math.PI / 360 )
                        * Math.cos( phi * Math.PI / 360 );
    y = radius * Math.sin( phi * Math.PI / 360 );
    z = radius * Math.cos( theta * Math.PI / 360 )
                        * Math.cos( phi * Math.PI / 360 );
  }
  
  TweenLite.to(this.camera_.position, .5, {
    x: x,
    y: y,
    z: z,
    ease: Power2.easeOut,
    onUpdate: function() {
      this.camera_.lookAt(this.scene_.position);
      this.camera_.updateMatrix();
    }.bind(this)
  });

};

Vessels.prototype.createTriangle_ = function(size, color) {
  
  var fullTriangle = new THREE.Object3D();
  
  var triangle = new Triangle(size, color);
  
  fullTriangle.add(triangle.mesh);
  
  triangle = new Triangle(size, color);
  triangle.mesh.rotation.x = 286.47 * Math.PI / 180;
  
  fullTriangle.add(triangle.mesh);
  
  this.scene_.add(fullTriangle);
  
  return fullTriangle;
};

Vessels.prototype.createStar_ = function() {
  
  var frontArrows = this.createHalf_();
  this.scene_.add(frontArrows);
  
  var backArrows = this.createHalf_();
  backArrows.rotation.y = 180 * Math.PI / 180;
  this.scene_.add(backArrows);
};

Vessels.prototype.createMultiRectangle_ = function(size, num, color) {
  this.createRectangle_(size);
  
  var multiRect = new THREE.Object3D();
  var hideSide = '';
  
  for (var i = 0; i < num; i++) {
    hideSide = '';
    if (i === 0) {
      hideSide = 'right'
    } else if (i === num - 1) {
      hideSide = 'left';
    }
    var rect = new Rectangle(size, color, hideSide);
    rect.mesh.position.x = size * i;
    multiRect.add(rect.mesh);
  }
  
  this.scene_.add(multiRect);
  
  return multiRect;
};

Vessels.prototype.createRectangle_ = function(size, position) {
  
};

Vessels.prototype.createHalf_ = function() {
  var arrows = new THREE.Object3D();
  
  var arrow = new Arrow();
  arrow.create(25,'#03a38f');
  arrow.mesh.position.x = 4;
  arrows.add(arrow.mesh);

arrow = new Arrow();
  arrow.create(25,'#03a38f');
  arrow.mesh.rotation.y = 180 * Math.PI / 180;
  arrow.mesh.rotation.x = 180 * Math.PI / 180;
  arrow.mesh.position.x = -4;
  arrows.add(arrow.mesh);

arrow = new Arrow();
  arrow.create(25, '#cf088a');
  arrow.mesh.rotation.z = 90 * Math.PI / 180;
  arrow.mesh.position.y = 4;
  arrows.add(arrow.mesh);

arrow = new Arrow();
  arrow.create(25, '#cf088a');
  arrow.mesh.rotation.z = 270 * Math.PI / 180;
  //arrow.mesh.rotation.x = 180 * Math.PI / 180;
  arrow.mesh.position.y = -4;
  arrows.add(arrow.mesh);
  
  
  
  arrow = new Arrow();
  arrow.create(8, '#03a38f');
  arrow.mesh.position.x = -9;
  arrow.mesh.rotation.z = 180 * Math.PI / 180;
  arrows.add(arrow.mesh);
  
  arrow = new Arrow();
  arrow.create(8, '#03a38f');
  arrow.mesh.position.x = 9;
  //arrow.mesh.rotation.z = 180 * Math.PI / 180;
  arrows.add(arrow.mesh);
  
  arrow = new Arrow();
  arrow.create(8, '#cf088a');
  arrow.mesh.position.y = -9;
  arrow.mesh.rotation.z = -90 * Math.PI / 180;
  arrows.add(arrow.mesh);
  
  arrow = new Arrow();
  arrow.create(8, '#cf088a');
  arrow.mesh.position.y = 9;
  arrow.mesh.rotation.z = 90 * Math.PI / 180;
  arrows.add(arrow.mesh);
  
  
  arrow = new Arrow();
  arrow.create(4, '#03a38f');
  arrow.mesh.position.x = -11.5;
  arrow.mesh.rotation.z = 180 * Math.PI / 180;
  arrows.add(arrow.mesh);
  
  arrow = new Arrow();
  arrow.create(4, '#03a38f');
  arrow.mesh.position.x = 11.5;
  //arrow.mesh.rotation.z = 180 * Math.PI / 180;
  arrows.add(arrow.mesh);
  
  arrow = new Arrow();
  arrow.create(4, '#cf088a');
  arrow.mesh.position.y = -11.5;
  arrow.mesh.rotation.z = -90 * Math.PI / 180;
  arrows.add(arrow.mesh);
  
  arrow = new Arrow();
  arrow.create(4, '#cf088a');
  arrow.mesh.position.y = 11.5;
  arrow.mesh.rotation.z = 90 * Math.PI / 180;
  arrows.add(arrow.mesh);
  
  
  return arrows;
};

Vessels.prototype.initVignetteShader_ = function() {
  this.composer_ = new THREE.EffectComposer(this.renderer_);
  this.composer_.addPass(new THREE.RenderPass(this.scene_, this.camera_));
  
  var vignette = new THREE.ShaderPass(THREE.VignetteShader);
  vignette.uniforms.offset.value = 1.16;
  vignette.uniforms.darkness.value = 1.0;
  vignette.renderToScreen = true;
  this.composer_.addPass(vignette);
};

Vessels.prototype.render_ = function() {
  //this.stats_.begin();
  
  this.angle_ += 0.02;
  var pointx  =  Math.cos( this.angle_ ) * 15;
  var pointy  = Math.sin( this.angle_) * 15;
  this.lights_[0].position.set(pointx, pointy, 0);
  this.lights_[1].position.set(0, pointx, pointy);
  
  this.dust_.update(this.lights_);
  //this.renderer_.render(this.scene_, this.camera_);
  this.composer_.render();
  //this.stats_.end();
  
  requestAnimationFrame(this.render_.bind(this));
};

var Dust = function(renderer, camera) {
  this.renderer_ = renderer;
  
  this.camera_ = camera;
  
  this.gpgpuUtility_ = null;

this.width_ = 256;

this.numParticles_ = this.width_ * this.width_;
  
  this.mesh = null;

this.positionVariable = null;

this.hair_ = null;
  
  this.particles_ = null;
  
  this.init();
};

Dust.prototype.init = function() {
  
  this.mesh = new THREE.Object3D();
  
  this.gpgpuUtility_ = new GPUComputationRenderer( this.width_, this.width_, this.renderer_ );
  var texturePosition = this.gpgpuUtility_.createTexture();
  var textureVelocity = this.gpgpuUtility_.createTexture();
  
  this.fillTexture_(texturePosition);
  this.fillVelocityTexture_(textureVelocity);
  
  this.positionVariable = this.gpgpuUtility_.addVariable(
      "texturePosition",
      document.getElementById( 'fragmentShaderPosition' ).textContent,
      texturePosition);

this.velocityVariable = this.gpgpuUtility_.addVariable(
      "textureVelocity",
      document.getElementById('fragmentShaderVelocity').textContent,
      textureVelocity);
  
  this.gpgpuUtility_.setVariableDependencies(this.positionVariable, [this.positionVariable, this.velocityVariable]);
  this.gpgpuUtility_.setVariableDependencies(this.velocityVariable, [this.positionVariable, this.velocityVariable]);

this.positionVariable.wrapS = THREE.RepeatWrapping;
  this.positionVariable.wrapT = THREE.RepeatWrapping;
  this.velocityVariable.wrapS = THREE.RepeatWrapping;
  this.velocityVariable.wrapT = THREE.RepeatWrapping;

this.gpgpuUtility_.init();
  
  this.createPointsGeometry_();
  this.createHairParticles_();
};

Dust.prototype.createHairParticles_ = function() {

this.hair_ = new THREE.Object3D();
  var resolution = new THREE.Vector2(window.innerWidth, window.innerHeight);
  var numHairs = 30;

var material = new MeshLineMaterial({
    useMap: false,
    color: new THREE.Color('#ffffff'),
    opacity: 0.2,
    resolution: resolution,
    sizeAttenuation: false,
    lineWidth: 2,
    near: this.camera_.near,
    far: this.camera_.far,
    transparent: true,
    blending: THREE.AdditiveBlending
  });
  
  for (var i = 0; i < numHairs; i++) {
    var geometry = new THREE.Geometry();

var length = Math.random() * 5 + 2;
    var curvyness = Math.random();
    for( var j = 0; j < length; j += curvyness ) {
        var v = new THREE.Vector3( j, Math.sin( j ), 0 );
        geometry.vertices.push( v );
    }

var line = new MeshLine();
    line.setGeometry( geometry );
    
    var mesh = new THREE.Mesh( line.geometry, material );

mesh.scale.set(0.5, 0.5, 0.5);
    mesh.position.set(Math.random() * 30 - 15, Math.random() * 30 - 15, Math.random() * 30 - 15);
    mesh.rotation.set(Math.random(), Math.random(), Math.random());

this.hair_.add(mesh);
  }
  
  this.mesh.add(this.hair_);
};

Dust.prototype.fillVelocityTexture_ = function(texture) {
  var theArray = texture.image.data;

for ( var k = 0, kl = theArray.length; k < kl; k += 4 ) {
    theArray[ k ] = Math.random() * 20 - 10;
    theArray[ k + 1 ] = Math.random() * 20 - 10;
    theArray[ k + 2 ] = Math.random() * 20 - 10;
    theArray[ k + 3 ] = 1;
  }
};

Dust.prototype.fillTexture_ = function(texture) {
  var theArray = texture.image.data;

var bounds = 50;
  var boundsHalf = bounds / 2;

for ( var k = 0, kl = theArray.length; k < kl; k += 4 ) {
    var x = Math.random() * bounds - boundsHalf;
    var y = Math.random() * bounds - boundsHalf;
    var z = Math.random() * bounds - boundsHalf;
    theArray[ k ] = x;
    theArray[ k + 1 ] = y;
    theArray[ k + 2 ] = z;
    theArray[ k + 3 ] = 1;
  }
};

Dust.prototype.createPointsGeometry_ = function() {
  var geometry = new THREE.BufferGeometry();

var vertices = new Float32Array(this.numParticles_ * 3);
  var references = new Float32Array(this.numParticles_ * 2);

for (var i = 0; i < vertices.length; i += 3) {
    vertices[i] = 0;
    vertices[i+1] = 0;
    vertices[i+2] = 0;

var j = ~~(i / 3);
    var x = (j % this.width_) / this.width_;
    var y = ~~(j / this.width_) / this.width_;

references[ i * 2     ] = x;
    references[ i * 2 + 1 ] = y;
  }

geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3 ));
  geometry.addAttribute('reference', new THREE.BufferAttribute(references, 2));

geometry.computeBoundingSphere();

var uniforms = {
    texturePosition: { value: null },
    time: { value: 1.0 },
    delta: { value: 0.0 },
    lightPos1: {value: new THREE.Vector3(0, 0, 0)},
    lightPos2: {value: new THREE.Vector3(0, 0, 0)},
    uSpread: {value: 0.26}
  };

var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: document.getElementById('particlesVertex').innerText,
    fragmentShader: document.getElementById('particlesFragment').innerText,
    side: THREE.DoubleSide,
    transparent: true,
    depthTest: false
  });

this.particles_ = new THREE.Points(geometry, material);
  
  this.mesh.add(this.particles_);
};

Dust.prototype.update = function(lights) {
  this.gpgpuUtility_.compute();
  
  if (this.hair_) {
    this.hair_.rotation.x += 0.0005;
    this.hair_.rotation.y += 0.0005;
    this.hair_.rotation.z += 0.0005;
  }
  
  
  this.particles_.material.uniforms.texturePosition.value = this.gpgpuUtility_.getCurrentRenderTarget(this.positionVariable).texture;
  
  this.particles_.material.uniforms.lightPos1.value = lights[0].position;
  this.particles_.material.uniforms.lightPos2.value = lights[1].position;
  
};

var Arrow = function() {
  this.mesh = null;
};

Arrow.prototype.create = function(size, color) {
  
  this.mesh = new THREE.Object3D();
  
  this.thirdOfWidth_ = size / 3;
  var lineWidth = size * 0.006;
  
  var geometry = new THREE.CubeGeometry(this.thirdOfWidth_ * 2, lineWidth, lineWidth);
  // var material = new THREE.MeshBasicMaterial({
  //   color: new THREE.Color(color)
  // });
  
  var material = new THREE.MeshPhongMaterial({
    color: new THREE.Color(color),
    blending: THREE.AdditiveBlending
  });
  
  // Middle line
  
  var line = new THREE.Mesh(geometry, material);
  line.position.x = -this.thirdOfWidth_;
  
  this.mesh.add(line);
  
  // Top Diagonal line
  var lineLength = Math.sqrt((size * size) + ((size / 2) * (size / 2)));
  geometry = new THREE.CubeGeometry(lineLength, lineWidth, lineWidth);
  
  var lineContainer = this.createDiagonalLine_(geometry, material, lineLength, 30 * Math.PI / 180);
  lineContainer.position.x = -this.thirdOfWidth_ * 2;
  lineContainer.rotation.x = -30 * Math.PI / 180;
  this.mesh.add(lineContainer);
  
  // Bottom Diagonal line.
  lineContainer = this.createDiagonalLine_(geometry, material, lineLength, -30 * Math.PI / 180);
  lineContainer.position.x = -this.thirdOfWidth_ * 2;
  lineContainer.rotation.x = 30 * Math.PI / 180;
  this.mesh.add(lineContainer);

var halfHeight = Math.sin(30 * Math.PI / 180) * lineLength;

// Arrow ends

// lineLength = (this.thirdOfWidth_ * 2) - .8;
  lineLength = Math.sqrt((halfHeight * halfHeight) + (this.thirdOfWidth_ * this.thirdOfWidth_)) - .2;
  geometry = new THREE.CubeGeometry(lineLength, lineWidth, lineWidth);

var angle = Math.acos(this.thirdOfWidth_ / lineLength) + 0.045;
  lineContainer = this.createDiagonalLine_(geometry, material, lineLength, angle);
  lineContainer.rotation.x = -30 * Math.PI / 180;
  this.mesh.add(lineContainer);

lineContainer = this.createDiagonalLine_(geometry, material, lineLength, -angle);
  lineContainer.rotation.x = 30 * Math.PI / 180;
  this.mesh.add(lineContainer);
  
  return this.mesh;
};

Arrow.prototype.createDiagonalLine_ = function(geometry, material, lineLength, radians) {
  var lineContainer = new THREE.Object3D();
  var line;
  
  line = new THREE.Mesh(geometry, material);
  line.position.x = lineLength / 2;
  
  lineContainer.rotation.z = radians;
  //lineContainer.rotation.x = 30 * Math.PI / 180;
  
  lineContainer.add(line);
  
  return lineContainer;
};

var Rectangle = function(size, color, hideSide) {
  this.size_ = size;
  
  this.color_ = color;
  
  this.mesh = null;
  
  var ratio = 1.7;
  this.height_ = size * ratio;
  
  this.lineWidth_ = size / 100;
  
  
  var material = new THREE.MeshPhongMaterial({
    color: new THREE.Color(color)
  });
  
  this.mesh = new THREE.Object3D();
  
  this.createTopAndBottomLines_(material);
  this.createSideLines_(material, hideSide);
  this.createDiagonalLines_(material);
  
};

Rectangle.prototype.createDiagonalLines_ = function(material) {
  //var lineWidth = Math.sqrt((this.size_ * this.size_) + (this.height_ * this.height_));
  var lineLength = Math.sqrt((this.size_ * this.size_) + (this.size_ * this.size_));
  lineLength = Math.sqrt((lineLength * lineLength) + (this.height_ * this.height_));
  //lineLength += 1.2;
  var geometry = new THREE.BoxGeometry(lineLength, this.lineWidth_, this.lineWidth_);
  
  var line = new THREE.Mesh(geometry, material);
  
  line.rotation.z = -50 * Math.PI / 180;
  line.rotation.y = 45 * Math.PI / 180;
  
  this.mesh.add(line);
  
  line = new THREE.Mesh(geometry, material);
  
  line.rotation.z = 50 * Math.PI / 180;
  line.rotation.y = -45 * Math.PI / 180;
  
  this.mesh.add(line);
  
  line = new THREE.Mesh(geometry, material);
  
  line.rotation.z = -50 * Math.PI / 180;
  line.rotation.y = -45 * Math.PI / 180;
  
  this.mesh.add(line);
  
  line = new THREE.Mesh(geometry, material);
  
  line.rotation.z = 50 * Math.PI / 180;
  line.rotation.y = 45 * Math.PI / 180;
  
  this.mesh.add(line);
};

Rectangle.prototype.createTopAndBottomLines_ = function(material) {
  var geometry = new THREE.BoxGeometry(this.size_, this.lineWidth_, this.lineWidth_);
  var line = new THREE.Mesh(geometry, material);
  line.position.y = this.height_ / 2;
  line.position.z = this.size_ / 2;
  this.mesh.add(line);
  
  line = new THREE.Mesh(geometry, material);
  line.position.y = -this.height_ / 2;
  line.position.z = this.size_ / 2;
  this.mesh.add(line);
  
  line = new THREE.Mesh(geometry, material);
  line.position.y = this.height_ / 2;
  line.position.z = -this.size_ / 2;
  this.mesh.add(line);
  
  line = new THREE.Mesh(geometry, material);
  line.position.y = -this.height_ / 2;
  line.position.z = -this.size_ / 2;
  this.mesh.add(line);
};

Rectangle.prototype.createSideLines_ = function(material, hideSide) {
  var geometry = new THREE.BoxGeometry(this.lineWidth_, this.height_, this.lineWidth_);
  
  if (hideSide !== 'left') {
    var line = new THREE.Mesh(geometry, material);
    line.position.x = this.size_ / 2;
    line.position.z = this.size_ / 2;
    this.mesh.add(line);
    
    line = new THREE.Mesh(geometry, material);
    line.position.x = this.size_ / 2;
    line.position.z = -this.size_ / 2;
    this.mesh.add(line);
  }
  
  if (hideSide !== 'right') {
    line = new THREE.Mesh(geometry, material);
    line.position.x = -this.size_ / 2;
    line.position.z = -this.size_ / 2;
    this.mesh.add(line);
    
    line = new THREE.Mesh(geometry, material);
    line.position.x = -this.size_ / 2;
    line.position.z = this.size_ / 2;
    this.mesh.add(line);
  }
};

var Triangle = function(size, color) {
  this.size_ = size;
  
  this.color_ = color;
  
  this.mesh = null;
  
  var ratio = 1.7;
  this.height_ = size * ratio;
  
  this.lineWidth_ = size / 100;
  
  var material = new THREE.MeshPhongMaterial({
    color: new THREE.Color(color)
  });
  
  this.mesh = new THREE.Object3D();
  
  var geometry = new THREE.BoxGeometry(size, this.lineWidth_, this.lineWidth_, 1, 1);
  
  this.createOuterTriangle_(geometry, material);
  this.createDepth_(geometry, material);
  
};

Triangle.prototype.createDepth_ = function(geometry, material) {
  var lineContainer = new THREE.Object3D();
  
  var line = new THREE.Mesh(geometry, material);
  line.position.x = -this.size_ / 2;
  lineContainer.position.x = -this.size_ / 2;
  lineContainer.rotation.y = -120.3 * Math.PI / 180;
  lineContainer.rotation.x = -376.4 * Math.PI / 180;
  lineContainer.add(line);
  this.mesh.add(lineContainer);
  
  lineContainer = new THREE.Object3D();
  line = new THREE.Mesh(geometry, material);
  line.position.x = this.size_ / 2;
  lineContainer.position.x = this.size_ / 2;
  lineContainer.rotation.y = 120.3 * Math.PI / 180;
  lineContainer.rotation.x = -376.4 * Math.PI / 180;
  lineContainer.add(line);
  this.mesh.add(lineContainer);
  
   var pos = Math.sin(120 * Math.PI / 180) * this.size_;
  
  lineContainer = new THREE.Object3D();
  line = new THREE.Mesh(geometry, material);
  line.position.x = this.size_ / 2;
  lineContainer.position.y = -pos
  lineContainer.rotation.y = -269.86 * Math.PI / 180;
  lineContainer.rotation.x = -322.57 * Math.PI / 180;
  lineContainer.add(line);
  this.mesh.add(lineContainer);
};

Triangle.prototype.createOuterTriangle_ = function(geometry, material) {
  var line = new THREE.Mesh(geometry, material);
  //line.rotation.z = 30 * Math.PI / 180;
  this.mesh.add(line);
  
  var lineContainer = new THREE.Object3D();
  
  line = new THREE.Mesh(geometry, material);
  line.position.x = -this.size_ / 2;
  lineContainer.rotation.z = 120 * Math.PI / 180;
  lineContainer.position.x = -this.size_ / 2;
  lineContainer.add(line);
  this.mesh.add(lineContainer);
  
  lineContainer = new THREE.Object3D();
  
  line = new THREE.Mesh(geometry, material);
  line.position.x = -this.size_ / 2;
  line.position.y = -this.lineWidth_ / 2;
  lineContainer.rotation.z = 240 * Math.PI / 180;
  
  var pos = Math.sin(120 * Math.PI / 180) * this.size_;
  
  lineContainer.position.y = -pos;
  lineContainer.add(line);
  this.mesh.add(lineContainer);
};

(function() {
  var vessels = new Vessels();
  vessels.init();
})();

CSS

HTML

void main() {

vec2 uv = gl_FragCoord.xy / resolution.xy;
    vec4 tmpPos = texture2D(texturePosition, uv);

vec4 velocity = texture2D(textureVelocity, uv);

vec3 position = tmpPos.xyz;

position += velocity.xyz * 0.0005;

if (position.y < -50.0 || position.y > 50.0) {
      position.y = -position.y;
    }
    if (position.x < -50.0 || position.x > 50.0) {
      position.x = -position.x;
    }
    if (position.z < -50.0 || position.z > 50.0) {
      position.z = -position.z;
    }

float phase = tmpPos.w;

gl_FragColor = vec4(position, 1.0);
  }
</script>

void main() {

vec2 uv = gl_FragCoord.xy / resolution.xy;
    vec4 tmpVel = texture2D(textureVelocity, uv);
    vec4 position = texture2D(texturePosition, uv);

float phase = tmpVel.w;

gl_FragColor = vec4(tmpVel.xyz, 1.0);
  }
</script>

uniform sampler2D texturePosition;
  uniform float delta;
  uniform float time;
  uniform vec3 lightPos1;
  uniform vec3 lightPos2;

uniform float uSpread;

attribute vec2 reference;

varying float alpha1;
  varying float alpha2;

float easeOutQuad(float t) {
    return t * (1.0 - t);
  }

float easeInQuad(float t) {
    return t * t;
  }

void main() {

vec4 tmpPos = texture2D(texturePosition, reference);
    vec3 pos = tmpPos.xyz;

vec4 position = projectionMatrix *  viewMatrix  * vec4( pos, 1.0 );

vec3 diff = normalize(tmpPos.xyz) - normalize(lightPos1.xyz);
    float dist = length(diff);
    alpha1 = 1.0 - dist;

diff = normalize(lightPos2.xyz) - normalize(tmpPos.xyz);
    dist = length(diff) * 0.2;
    alpha2 = 1.0 - dist;

alpha1 = clamp(alpha1, 0.0, 0.8);
    alpha2 = clamp(alpha2, 0.0, 0.8);

gl_PointSize = 2.0;
    gl_Position = position;

}

</script>

void main() {

vec3 light1Color = vec3(0.8, 0.03, 0.54);
    vec3 light2Color = vec3(0.3, 0.63, 0.56);

vec3 color = light1Color * alpha1;
    color += light2Color * alpha2;

gl_FragColor = vec4(color, alpha1 + alpha2);
  }

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/GPUComputationRenderer.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/shaders/VignetteShader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/shaders/CopyShader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://cdn.rawgit.com/spite/THREE.MeshLine/master/src/THREE.MeshLine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min.js"></script>

Recommendation

Join Effecthub.com