html5的canvas实现3d雪花飘舞效果


Posted in HTML / CSS onDecember 27, 2013

复制代码
代码如下:

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;</p> <p> var container;</p> <p> var particle;</p> <p> var camera;
var scene;
var renderer;</p> <p> var mouseX = 0;
var mouseY = 0;</p> <p> var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var particles = [];
var particleImage = new Image();//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
particleImage.src = 'images/ParticleSmoke.png'; </p> <p>

function init() {</p> <p> container = document.createElement('div');
document.body.appendChild(container);</p> <p> camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 1000;</p> <p> scene = new THREE.Scene();
scene.add(camera);

renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );

for (var i = 0; i < 500; i++) {</p> <p> particle = new Particle3D( material);
particle.position.x = Math.random() * 2000 - 1000;
particle.position.y = Math.random() * 2000 - 1000;
particle.position.z = Math.random() * 2000 - 1000;
particle.scale.x = particle.scale.y = 1;
scene.add( particle );

particles.push(particle);
}</p> <p> container.appendChild( renderer.domElement );</p> <p>
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );

setInterval( loop, 1000 / 60 );

}

function onDocumentMouseMove( event ) {</p> <p> mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}</p> <p> function onDocumentTouchStart( event ) {</p> <p> if ( event.touches.length == 1 ) {</p> <p> event.preventDefault();</p> <p> mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}</p> <p> function onDocumentTouchMove( event ) {</p> <p> if ( event.touches.length == 1 ) {</p> <p> event.preventDefault();</p> <p> mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}</p> <p> //</p> <p> function loop() {</p> <p> for(var i = 0; i<particles.length; i++)
{</p> <p> var particle = particles[i];
particle.updatePhysics();

with(particle.position)
{
if(y<-1000) y+=2000;
if(x>1000) x-=2000;
else if(x<-1000) x+=2000;
if(z>1000) z-=2000;
else if(z<-1000) z+=2000;
}
}

camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt(scene.position); </p> <p> renderer.render( scene, camera );</p> <p>
}

HTML / CSS 相关文章推荐
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 #HTML / CSS
html5 css3网站菜单实现代码
Dec 23 #HTML / CSS
html5 自定义播放器核心代码
Dec 20 #HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 #HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 #HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 #HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 #HTML / CSS
You might like
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
JavaScript 中的replace方法说明
2007/04/13 Javascript
javascript 进度条 实现代码
2009/07/30 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
django反向解析和正向解析的方式
2018/06/05 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
详解Python多线程下的list
2020/07/03 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
股权转让协议书
2014/04/12 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
班级文化标语
2014/06/23 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
参加招聘会后的感想
2015/08/10 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书