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 相关文章推荐
浅析两列自适应布局的3种思路
May 03 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
source.php查看源文件
2006/12/09 PHP
php 过滤危险html代码
2009/06/29 PHP
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
php的ddos攻击解决方法
2015/01/08 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
PHP多态代码实例
2015/06/26 PHP
jquery 防止表单重复提交代码
2010/01/21 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
Python原始字符串(raw strings)用法实例
2014/10/13 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
django_orm查询性能优化方法
2018/08/20 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
python groupby 函数 as_index详解
2019/12/16 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
最新教师自我评价分享
2013/11/12 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
民事诉讼代理词
2015/05/25 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书