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制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 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
微信公众号模板消息群发php代码示例
2016/12/29 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
javascript 对象的定义方法
2007/01/10 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
初学Python实用技巧两则
2014/08/29 Python
使用grappelli为django admin后台添加模板
2014/11/18 Python
python实现的简单猜数字游戏
2015/04/04 Python
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
python让列表倒序输出的实例
2018/06/25 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
党校学习思想汇报
2014/01/06 职场文书
听课评语大全
2014/04/30 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python
利用Python实时获取steam特惠游戏数据
2022/06/25 Python