android爬楼梯动画,TweenMax+Three.js 立方体爬楼梯动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var that;

var StairwayCubes = function() {

this.scene = new THREE.Scene();

that = this;

};

StairwayCubes.prototype.init = function() {

this.createCamera();

this.createRenderer();

this.createBoxes();

this.createFloor();

this.createLights();

this.animateBoxes();

this.render();

};

StairwayCubes.prototype.createCamera = function() {

this.camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, -1000, 1000);

this.camera.position.x = 100;

this.camera.position.y = 100;

this.camera.position.z = 100;

this.camera.lookAt(new THREE.Vector3(0, 0, 0));

this.camera.zoom = 1.1;

this.camera.updateProjectionMatrix();

//Adjust the scene to center the stairs

this.scene.position.z = 150;

this.scene.position.y = -50;

};

StairwayCubes.prototype.createRenderer = function() {

this.renderer = new THREE.WebGLRenderer({

antialias: true

});

this.renderer.setSize(window.innerWidth, window.innerHeight);

this.renderer.setClearColor(0xf2f2f2);

this.renderer.shadowMapEnabled = true;

this.renderer.shadowMapType = THREE.PCFSoftShadowMap;

this.renderer.shadowMapSoft = true;

document.body.appendChild(this.renderer.domElement);

//window.addEventListener('resize', this.onWindowResize, false);

};

StairwayCubes.prototype.createBoxes = function() {

this.numberOfStairs = 4;

this.repeatBoxeAnimation = this.numberOfStairs - 1;

this.stairs = [];

var positionZStart = -25; //start position of the stairs on their Z axis

var geometry = new THREE.BoxGeometry(50, 50, 50);

var material = new THREE.MeshLambertMaterial({

color: 0xf2f2f2,

shading: THREE.FlatShading

});

//boxe container is usefull to rotate the boxe around his edge

this.boxeContainer = new THREE.Object3D();

this.boxeContainer.rotation.x = -2 * Math.PI;

this.boxeContainer.position.y = 50;

this.boxeContainer.position.z = -50;

this.boxe = new THREE.Mesh(geometry, material);

this.boxe.position.x = 0;

this.boxe.position.y = -25;

this.boxe.position.z = 25;

this.boxe.castShadow = true;

this.boxeContainer.add(this.boxe);

this.scene.add(this.boxeContainer);

//We create the stairs

var geometryStair = new THREE.BoxGeometry(50, 51, 50);

geometryStair.applyMatrix(new THREE.Matrix4().makeTranslation(0, 25, 0)); //permit to change the origin point to the box floor

for (var i = 1; i <= this.numberOfStairs; i++) {

this.stairs[i] = new THREE.Mesh(geometryStair, material);

this.stairs[i].position.y = -1;

this.stairs[i].position.z = positionZStart - 50;

this.stairs[i].scale.y = 0;

this.stairs[i].castShadow = true;

positionZStart -= 50;

this.scene.add(this.stairs[i]);

}

};

StairwayCubes.prototype.createFloor = function() {

var geometry2 = new THREE.PlaneBufferGeometry(1000, 1000);

var material2 = new THREE.MeshBasicMaterial({

color: 0xf2f2f2

});

var floor = new THREE.Mesh(geometry2, material2);

floor.material.side = THREE.DoubleSide;

floor.rotation.x = 90 * Math.PI / 180;

floor.doubleSided = true;

floor.receiveShadow = true;

this.scene.add(floor);

};

StairwayCubes.prototype.createLights = function() {

this.scene.add(new THREE.AmbientLight(0x5b5b5b));

var shadowLight = new THREE.DirectionalLight(0xffffff, 0.5);

shadowLight.position.set(-1000, 1000, 0);

shadowLight.target.position.set(this.scene.position);

shadowLight.castShadow = true;

shadowLight.shadowDarkness = 0.1;

//shadowLight.shadowCameraVisible = true;

this.scene.add(shadowLight);

var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);

directionalLight.position.set(-1000, 1000, 0);

directionalLight.target.position.set(this.scene.position);

this.scene.add(directionalLight);

};

/*The boxe climb the stairs*/

StairwayCubes.prototype.animateBoxes = function() {

this.tl = new TimelineMax({

repeat: that.repeatBoxeAnimation,

delay: 1.2,

repeatDelay: 0,

onComplete: this.reverseAnimation

});

this.tl.to(this.boxeContainer.rotation, 0.8, {

x: -3 * Math.PI,

ease: Power1.easeInOut,

onComplete: this.increaseValue

});

this.t2 = new TimelineMax({

repeat: 0,

delay: 0.60,

repeatDelay: 0

});

for (var i = 1; i <= this.numberOfStairs; i++) {

this.t2.to(this.stairs[i].scale, 0.8, {

y: i,

ease: Expo.easeInOut

});

}

};

/*Increase boxe Container value to increase in height the cube rotation*/

StairwayCubes.prototype.increaseValue = function() {

that.boxeContainer.position.y += 50;

that.boxeContainer.position.z -= 50;

that.boxe.position.y = -25;

that.boxe.position.z = 25;

that.boxeContainer.rotation.x = -2 * Math.PI;

};

/*Decrease boxe Container value to decrease in height the cube rotation*/

StairwayCubes.prototype.decreaseValue = function() {

that.boxeContainer.position.y -= 50;

that.boxeContainer.position.z += 50;

that.boxe.position.y = +25;

that.boxe.position.z = -25;

that.boxeContainer.rotation.x = 2 * Math.PI;

};

/*Restart the animation*/

StairwayCubes.prototype.resetAnimations = function() {

that.increaseValue();

setTimeout(function() {

that.t2.play(0);

setTimeout(function() {

that.tl.play(0);

}, 600);

}, 1000);

};

/*The cube down stairs*/

StairwayCubes.prototype.reverseAnimation = function() {

that.decreaseValue();

that.t3 = new TimelineMax({

repeat: that.repeatBoxeAnimation,

delay: 1.5,

repeatDelay: 0,

onComplete: that.resetAnimations

});

that.t3.to(that.boxeContainer.rotation, 0.8, {

x: 3 * Math.PI,

ease: Power1.easeInOut,

onComplete: that.decreaseValue

});

this.t4 = new TimelineMax({

repeat: 0,

delay: 2.2,

repeatDelay: 0

});

for (var i = that.numberOfStairs; i >= 1; i--) {

this.t4.to(that.stairs[i].scale, 0.8, {

y: 0,

ease: Back.easeInOut

});

}

};

StairwayCubes.prototype.render = function() {

requestAnimationFrame(this.render.bind(this));

this.renderer.render(this.scene, this.camera);

};

StairwayCubes.prototype.onWindowResize = function() {

that.camera.left = window.innerWidth / -2;

that.camera.right = window.innerWidth / 2;

that.camera.top = window.innerHeight / 2;

that.camera.bottom = window.innerHeight / -2;

that.renderer.setSize(window.innerWidth, window.innerHeight);

};

var movingBoxes = new StairwayCubes();

movingBoxes.init();