EffectHub.com: your best source for gaming

Recommendation

More Effects...

(function(window) {
  var scene, camera, renderer, container, clock, mesh;

function start() {
    //Scene Start
    scene = new THREE.Scene();

var
      VIEW_ANGLE = 45,
      NEAR = 0.001,
      FAR = 2,
      SCREEN_WIDTH = window.innerWidth,
      SCREEN_HEIGHT = window.innerHeight,
      ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT;
    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    camera.position.set(.33, .25, -.25);
    camera.lookAt(scene.position);
    scene.add(camera);

//Renderer
    renderer = new THREE.WebGLRenderer({
      alpha: true
    });

renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

container = document.getElementById('threejs');
    container.appendChild(renderer.domElement);
    clock = new THREE.Clock();
  }

function animate() {
    mesh.rotation.y = clock.getElapsedTime() * 0.015;
    mesh.material.uniforms.time.value = 0.015 * clock.getElapsedTime();
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
  }

/**
   * Generates a 3D Harary Graph.
   * http://mathworld.wolfram.com/HararyGraph.html
   * @param {int} h - level of h^3 iterations.
   * @return {BufferGeometry} geometry
   */
  function hcloud(h) {
    h = (h < 2) ? 2 : h;
    var geometry = new THREE.BufferGeometry(),
      vert_count = h * h * h,
      positions = new Float32Array(3 * vert_count);

//Positions
    for (var a = 0; a < vert_count; a++) {
      var xx = -.5 + parseInt(a % h) / (h - 1),
        yy = -.5 + parseInt(a / h % h) / (h - 1),
        zz = -.5 + parseInt(a / (h * h) % h) / (h - 1);

positions[3 * a] = xx;
      positions[3 * a + 1] = yy;
      positions[3 * a + 2] = zz;
    }

//Indices
    var tmp = [];
    for (var i = 0; i < vert_count; i++) {
      for (var j = i + 1; j < vert_count; j++) {
        tmp.push(i, j);
      }
    }
    geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
    geometry.addAttribute('index', new THREE.BufferAttribute(new Uint16Array(tmp), 1));
    geometry.computeBoundingSphere();
    return geometry;
  }

/**
   * Mimics background-size: cover attribute. 
   * @param {float} aspect - desired aspect ratio.
   */
  function resizeCallback(aspect) {
    var pw, ph, pr, w, h;
    pw = window.innerWidth;
    ph = window.innerHeight;
    pr = pw / ph;
    w = (aspect > pr) ? ph * aspect : pw;
    h = (aspect > pr) ? ph : pw / aspect;

renderer.setSize(w, h);
    renderer.setViewport(((pw - w) / 2), -((ph - h) / 2), w, h);
    // update the camera
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
  }

//Start Program
  start();
  draw(4);
  animate();
  resizeCallback(1.6);
  window.addEventListener('resize', function() {
    resizeCallback(1.6);
  });

//////////////////////////////////////////
  //Stats & datGUI
  //////////////////////////////////////////
  var debugContainer = document.getElementById("debug");
  /*
  var stats = new Stats();
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.bottom = '-48px';
  stats.domElement.style.right = "0px";
  debugContainer.appendChild(stats.domElement);

guiControl.onFinishChange(function(value) {
    scene.remove(mesh);
    draw(value);
  });
  gui.domElement.style.position = 'absolute';
  gui.domElement.style.bottom = '-28px';
  gui.domElement.style.left = "0px";
  debugContainer.appendChild(gui.domElement);
})(window);

CSS

/******************************************
 * Standard HTML
******************************************/
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  z-index: -2;
}

html {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9ImNpcmNsZSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIzMyUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9Ii0wLjA3MDQyOCIgeTE9IjAuODk5NDE4IiB4Mj0iMS4wNzA0MjgiIHkyPSIwLjEwMDU4MiI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwMThmMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JkMzY4ZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -moz-radial-gradient(circle, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.2) 100%), -moz-linear-gradient(35deg, #7018f2, #bd368f);
  background-image: -webkit-radial-gradient(circle, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.2) 100%), -webkit-linear-gradient(35deg, #7018f2, #bd368f);
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(55deg, #7018f2, #bd368f);
}

input {
  border: 0 none;
  background: transparent;
  color: #fff;
}

ul {
  padding: 0;
  margin: 0;
  font-size: 14px;
  list-style: none outside none;
}

a {
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s;
}
a:link, a:visited {
  color: #F34FBB;
}
a:hover {
  color: #70c0e8;
}
a:active {
  color: #2e89c0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 100;
  font-size: 14px;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 3em;
}

h2 {
  font-size: 2em;
}

/*****************************************
 * Core Styles
 ****************************************/
.logo {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.logo img {
  margin: 0 16px;
}

.stela-logo {
  display: block;
  width: 320px;
  height: 180px;
  z-index: 10;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/165182/stelalogo.png") no-repeat scroll center center/contain;
}

.stela-logotype {
  display: block;
  width: 240px;
  height: 96px;
  z-index: 10;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/165182/Stela_Logotype.svg") no-repeat center;
}

.stela-section {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.stela-section canvas {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<div class="stela-section" id="threejs">
  
  <a href="#"><i class="ion-ios-arrow-down animated fadeInDown" style="font-size: 2em;"></i></a>
</div>
<div id="debug" class="stela-section" style="background: #ddd; color: #444;">
  <h1>We're a Small Team of Skilled Devs.</h1>
  <p>We never stop working on projects, from in house work to applications for other companies.</p>
</div>

<script id="vertexShader" type="x-shader/x-vertex">
precision mediump float;
precision mediump int;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform float time;
    
attribute vec3 position;
attribute vec4 color;

varying float vDepth;
    
float noise;
float view_far = 1.0;
float view_near = 0.001;

//4D Perlin Noise Lib
//https://github.com/ashima/webgl-noise
vec4 mod289(vec4 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0; }
float mod289(float x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec4 permute(vec4 x) {
     return mod289(((x*34.0)+1.0)*x);
}
float permute(float x) {
     return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
  return 1.79284291400159 - 0.85373472095314 * r;
}
float taylorInvSqrt(float r)
{
  return 1.79284291400159 - 0.85373472095314 * r;
}
vec4 grad4(float j, vec4 ip)
  {
  const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
  vec4 p,s;
  p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;
  p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
  s = vec4(lessThan(p, vec4(0.0)));
  p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;

return p;
  }
#define F4 0.309016994374947451
float snoise(vec4 v)
  {
  const vec4  C = vec4( 0.138196601125011,
                        0.276393202250021,
                        0.414589803375032,
                       -0.447213595499958);
  vec4 i  = floor(v + dot(v, vec4(F4)) );
  vec4 x0 = v -   i + dot(i, C.xxxx);
  vec4 i0;
  vec3 isX = step( x0.yzw, x0.xxx );
  vec3 isYZ = step( x0.zww, x0.yyz );
  i0.x = isX.x + isX.y + isX.z;
  i0.yzw = 1.0 - isX;
  i0.y += isYZ.x + isYZ.y;
  i0.zw += 1.0 - isYZ.xy;
  i0.z += isYZ.z;
  i0.w += 1.0 - isYZ.z;
  vec4 i3 = clamp( i0, 0.0, 1.0 );
  vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );
  vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );
  vec4 x1 = x0 - i1 + C.xxxx;
  vec4 x2 = x0 - i2 + C.yyyy;
  vec4 x3 = x0 - i3 + C.zzzz;
  vec4 x4 = x0 + C.wwww;
  i = mod289(i); 
  float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);
  vec4 j1 = permute( permute( permute( permute (
             i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))
           + i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))
           + i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))
           + i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));

vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;
  vec4 p0 = grad4(j0,   ip);
  vec4 p1 = grad4(j1.x, ip);
  vec4 p2 = grad4(j1.y, ip);
  vec4 p3 = grad4(j1.z, ip);
  vec4 p4 = grad4(j1.w, ip);
  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
  p0 *= norm.x;
  p1 *= norm.y;
  p2 *= norm.z;
  p3 *= norm.w;
  p4 *= taylorInvSqrt(dot(p4,p4));
  vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);
  vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4)            ), 0.0);
  m0 = m0 * m0;
  m1 = m1 * m1;
  return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))
               + dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;
  }
//4D Perlin Noise Lib End

void main()	{
    noise = snoise(vec4(position,time));
    vec4 objPos = vec4( position + (position * noise), 1.0 );
	gl_Position = projectionMatrix * modelViewMatrix * objPos;
	vDepth = (gl_Position.z - view_near) / (view_far - view_near);
}
		</script>

varying float vDepth;
			void main()	{
      float d = (1.0-vDepth);
				gl_FragColor = vec4(1.0,1.0,1.0,0.5 * d*d*d*d*d);
			}
		</script>

Recommendation

Join Effecthub.com