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属性选择符介绍
Oct 17 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
PHP延迟静态绑定示例分享
2014/06/22 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
javascript生成随机颜色示例代码
2014/05/05 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
python多进程实现文件下载传输功能
2018/07/28 Python
对python:print打印时加u的含义详解
2018/12/15 Python
pandas数据集的端到端处理
2019/02/18 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
通过cmd进入python的步骤
2020/06/16 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
大韩航空官方网站:Korean Air
2017/10/25 全球购物
2015年幼儿园毕业感言
2014/02/12 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
英文求职信范文
2014/05/23 职场文书
微笑服务标语
2014/06/24 职场文书
承诺书样本
2014/08/30 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
教导主任个人总结
2015/03/03 职场文书
社区节水倡议书
2015/04/29 职场文书
田径运动会广播稿
2015/08/19 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书