EffectHub.com: your best source for gaming

Recommendation

More Effects...

//s.codepen.io/joshbader/debug/badd93ac5c974796d5bfb092e2fd620e
      // GLOBAL VARIABLES
var scene,
    camera, fieldOfView, aspectRatio, nearPlane, farPlane,
    renderer, container,
    HEIGHT, WIDTH,
    ambientLight, hemisphereLight, shadowLight,
    shape;

// HANDLE SCREEN EVENTS
function handleWindowResize() {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  renderer.setSize(WIDTH, HEIGHT);
  camera.aspect = WIDTH / HEIGHT;
  camera.updateProjectionMatrix();
}

// INIT THREE JS SCENE
function createScene() {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;

scene = new THREE.Scene();
  aspectRatio = WIDTH / HEIGHT;
  fieldOfView = 20;
  nearPlane = 1;
  farPlane = 100000;
  camera = new THREE.PerspectiveCamera(
    fieldOfView,
    aspectRatio,
    nearPlane,
    farPlane
    );
  scene.fog = new THREE.Fog(0x33ffee, 100, 950);
  camera.position.x = 0;
  camera.position.z = 200;
  camera.position.y = 0;

renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(WIDTH, HEIGHT);
  renderer.shadowMap.enabled = true;
  container = document.getElementById('world');
  container.appendChild(renderer.domElement);

window.addEventListener('resize', handleWindowResize, false);
}

// LIGHTS
function createLights() {
  hemisphereLight = new THREE.HemisphereLight(0xbd8f49,0x000000, .8);
  ambientLight = new THREE.AmbientLight(0xdcde95, .5);

shadowLight = new THREE.DirectionalLight(0xcc2200, .9);
  shadowLight.position.set(150, 350, 350);
  shadowLight.castShadow = true;

scene.add(hemisphereLight);
  scene.add(shadowLight);
  scene.add(ambientLight);
}

// Shape
Shape = function() {
  var geometry = new THREE.SphereGeometry(60, 60, 30),
      material = new THREE.MeshPhongMaterial({
        color: 0xffffff,
        transparent: true,
        opacity: .7,
        shading: THREE.FlatShading,
      }),
      l = geometry.vertices.length;
  
  this.waves = [];

for (var i = 0; i < l; i++) {
    var v = geometry.vertices[i];
    this.waves.push({
      y: v.y,
      x: v.x,
      z: v.z,
      ang: Math.random() * Math.PI * 0.5,
      amp: Math.random() * 2,
      speed: 0.025 + Math.random() * 0.01
    });
  };

this.mesh = new THREE.Mesh(geometry, material);
  this.mesh.receiveShadow = true;
}

Shape.prototype.moveWaves = function() {
  var verts = this.mesh.geometry.vertices;
  var l = verts.length;
  
  for (var i = 0; i < l; i++) {
    var v = verts[i],
        vprops = this.waves[i];
    
    v.x = vprops.x + Math.cos(vprops.ang) * vprops.amp;
    v.y = vprops.y + Math.sin(vprops.ang) * vprops.amp;
    vprops.ang += vprops.speed;
  }
  
  this.mesh.geometry.verticesNeedUpdate = true;
  shape.mesh.rotation.z += .001;
}

// 3D MODEL
function createShape() {
  shape = new Shape();
  shape.mesh.position.y = 0;
  scene.add(shape.mesh);
}

// LOOP
function loop() {
  shape.moveWaves();
  renderer.render(scene, camera);
  requestAnimationFrame(loop);
}

// INIT
function init(event) {
  createScene();
  createLights();
  createShape();
  loop();
}

window.addEventListener('load', init, false);
      //# sourceURL=pen.js

CSS

HTML

Recommendation

Join Effecthub.com