Bouncing Cube (#3December - Day 4)

bouncing-cube-3december-day-4.markdown

Bouncing Cube (#3December - Day 4)

A Pen by Shaw on CodePen.

License.

script.js

console.clear();

let scene, camera, renderer, orbit, lights;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 400 );

camera.position.z = 80;
camera.position.y = 35;
camera.up = new THREE.Vector3(0,0,0);
//camera.lookAt(new THREE.Vector3(0,-100,0));

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 );

// orbit = new THREE.OrbitControls( camera, renderer.domElement );
// orbit.enableZoom = true;
// orbit.enablePan = true;

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

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

scene.add( lights[ 0 ] );
scene.add( lights[ 1 ] );
scene.add( lights[ 2 ] );

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


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


let geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
let material = new THREE.MeshLambertMaterial( { 
  color: 0xBC3D2D,
  emissive: 0x8F341A,
  side: THREE.DoubleSide,
  shading: THREE.FlatShading
} );
let cube = new THREE.Mesh( geometry, material );

geometry.applyMatrix( new THREE.Matrix4().makeTranslation(0, 10, 0) );

scene.add(cube);


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


var tl = new TimelineMax({
  delay:0.2, 
  repeat: -1, 
  repeatDelay: 0.1,
  onUpdate: function(){
    renderer.render( scene, camera );
  }
});

var duration = 3.25;

CustomBounce.create("myBounce", {
  strength: 0.7, 
  squash: 1.6, 
  squashID:"myBounce-squash"
});

tl.from(cube.position, duration, {
  y: 45, 
  ease:"myBounce", 
}, 0);

tl.to(cube.scale, duration, {
  x: 1.5, 
  y: 0.4, 
  ease:"myBounce-squash", 
}, 0);

tl.to(cube.scale, duration * 0.1, {
  y: 0.5, 
  x: 1.25,
  ease:"Power1.easeInOut", 
});

tl.addLabel('backUp');

tl.to(cube.position, duration * 0.2, {
  y: 45, 
  ease:"Power2.easeInOut",//myBounce", 
  delay: duration * 0.05
},'backUp');

tl.to(cube.scale, duration * 0.2, {
  y: 1, 
  x: 1,
  ease:"Power1.easeInOut"
},'backUp');

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce.min.js"></script>