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绘制圆角矩形的简单示例
Sep 28 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
Look And Say 序列php实现代码
2011/05/22 PHP
PHP里的中文变量说明
2011/07/23 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
php 可变函数使用小结
2018/06/12 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
如何在PHP中使用数组
2020/06/09 PHP
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
javascript中this关键字详解
2016/12/12 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python中的两个内置模块介绍
2015/04/05 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
Python笔记之工厂模式
2019/11/20 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
办理退休介绍信
2014/01/09 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
总经理岗位职责范本
2014/02/02 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
师范生见习自我总结
2015/06/23 职场文书