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();
android爬楼梯动画,TweenMax+Three.js 立方体爬楼梯动画相关推荐
- html涟漪动画效果,CSS+JS实现水滴涟漪动画按钮效果的示例代码
代码如下所示: Document .btn{ display: block; width: 300px; height: 100px; margin: 50px; outline: 0; overfl ...
- 解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
- TweenMax.js大熊猫吃面条动画
下载地址 SVG绘制的大熊猫和面条,条用TweenMax.js动画类库实现大熊猫吃面条的动画效果. dd:
- android扑克发牌动画,JS实现纸牌发牌动画
本文实例为大家分享了JS实现纸牌发牌动画的具体代码,供大家参考,具体内容如下 先看演示 游戏构建准备 1.准备52张纸牌 2.一张桌布 3.编辑工具为 Visual Code 技术概要 1.对象操作 ...
- android svg指纹录取动画_你知道几种前端动画的实现方式?
随着互联网的持续发展,H5 页面作为与用户直接交互的表现层越来越复杂,呈现的形式也越来越丰富,从而也要求 H5 页面具有更多的花样性及动画效果.那前端实现动画效果的方式有哪些呢,大致有如下几种: 一. ...
- java爬虫拉勾网_[Java教程]node.js爬虫爬取拉勾网职位信息
[Java教程]node.js爬虫爬取拉勾网职位信息 0 2017-03-14 00:00:21 简介 用node.js写了一个简单的小爬虫,用来爬取拉勾网上的招聘信息,共爬取了北京.上海.广州.深圳 ...
- three.js绘制波浪面_使用Three.js构建建筑物波浪动画
three.js绘制波浪面 View demo 查看演示Download Source 下载源 This tutorial is going to demonstrate how to build a ...
- Three.js实现简单开门动画
Three.js实现简单开门动画 先来看一下简单的开门动画实现效果,如下图所示: 可以看得出这个开门动画还是比较简单的,主要关键点有2个地方: 实现门围绕右门框旋转. 利用关键帧实现动画. 1.实现门 ...
- 3dsmax 长动画导入 three.js 转变成 多个动画
3dsmax biped长动画导入 three.js 转变成 多个动 文章目录 3dsmax biped长动画导入 three.js 转变成 多个动 导出长动画 动画切割 导出长动画
最新文章
- STM32库中几个重要的文件说明
- windows安装pygame
- List集合存入int类型值1,remove(1)方法按下标还是按对象删除信息
- flink sql planner到底是干嘛用的
- ubuntu上最使用jni最简单易懂的例子
- Echarts地图编写
- OI树上问题 简单学习笔记
- XamarinEssentials教程应用程序信息AppInfo
- 实现自定义背景色、前景色、显示进度的进度条
- linux 有道 离线词典,有道词典离线版
- python中判断一个数是否为素数_怎么用python判断一个数是否是素数
- 仓库温度湿度控制措施_仓库温度的控制要求
- 研发工程师历年企业笔试真题汇总
- python redis decode_responses
- 180902 逆向-网鼎(4-dalao)
- 基于DEM的GIS水文分析——河网与集水区域的提取
- 【企业架构】确定策略和动机
- 女星长发如雪 上演现代版白发魔女传(组图)
- MinIO入门-02 SpringBoot 整合MinIO并实现文件上传
- 特征选择时 的 特征子集选择和特征评价