#3December - Day 1

3december-day-1.markdown

#3December - Day 1

A Pen by Shaw on CodePen.

License.

script.js

console.clear();

let opts = {
  variance: { x: 5, y: 5, z: 10 },
  speed: 2,
  easing: Elastic.easeOut//Linear.easeNone
};

/*////////////////////////////////////////*/

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 800 );
camera.position.z = 400;
camera.position.x = 200;

var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x000000, 1 );
document.body.appendChild( renderer.domElement );

/*////////////////////////////////////////*/

var orbit = new THREE.OrbitControls( camera, renderer.domElement );
orbit.enableZoom = false;

/*////////////////////////////////////////*/

var lights = [];
lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );

lights[ 0 ].position.set( 0, 200, 0 );
lights[ 1 ].position.set( 100, 200, 100 );

scene.add.apply( scene, lights );

/*////////////////////////////////////////*/

function rand(min, max) {
  if (max == null) {
    max = min;
    min = 0;
  }
  return min + (Math.random() * (max - min + 1));
  // Math.floor
};

let plane;
let geometry;
let defaultVertices;

var loader = new THREE.TextureLoader();
loader.load(
	'http://brokensquare.com/Code/assets/face.png',
	function ( texture ) {
    
    geometry = new THREE.PlaneGeometry( texture.image.width, texture.image.height, 10, 10 );
    
		var material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide }); 
    
    plane = new THREE.Mesh( geometry, material );
    scene.add( plane );
    defaultVertices = plane.geometry.clone().vertices;
    
    render();
    
    function randomTween(i, speed) {
      
      speed = speed || opts.speed || 1;
      var tween = TweenLite.to(plane.geometry.vertices[i], speed * rand(0.7, 1), {
        x: rand(-opts.variance.x, opts.variance.x) + defaultVertices[i].x,
        y: rand(-opts.variance.y, opts.variance.y) + defaultVertices[i].y,
        z: rand(-opts.variance.z, opts.variance.z) + defaultVertices[i].z, 
        ease: opts.easing,
        onComplete: randomTween,
        onCompleteParams: [i]
      });

      return tween;
    }

    function randomTweens() {
      var tweens = [];
      for (var i = 0; i < plane.geometry.vertices.length; i++) {
        tweens.push(randomTween(i), 0);
      }
      return tweens;
    }
    randomTweens();
    
    
	});


var render = function () {
  requestAnimationFrame( render );

  if ( plane ) {
    plane.geometry.verticesNeedUpdate = true;
    plane.geometry.normalsNeedUpdate = true;
    plane.geometry.computeFaceNormals();
  }

  renderer.render( scene, camera );
};

window.addEventListener( 'resize', function () {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );
}, false );

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>