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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
HTML5 新事件 小结
Jul 16 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
PHP批量生成缩略图的代码
2008/07/19 PHP
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
JavaScript null和undefined区别分析
2009/10/14 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
浅谈Python中的数据类型
2015/05/05 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
JSF的标签库有哪些
2012/04/27 面试题
计算机毕业生自荐信范文
2014/03/23 职场文书
节约用水标语
2014/06/11 职场文书
老公出轨后的保证书
2015/05/08 职场文书
2015年教师节主持词
2015/07/03 职场文书
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python