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 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
对CSS3选择器的研究(详解)
Sep 16 HTML / CSS
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
Nov 10 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 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图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
php pdo操作数据库示例
2017/03/10 PHP
使用js检测浏览器的实现代码
2013/05/14 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
pycharm安装图文教程
2017/05/02 Python
python简易远程控制单线程版
2018/06/20 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
python对XML文件的操作实现代码
2020/03/27 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
python如何快速生成时间戳
2020/07/21 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
财务出纳员岗位职责
2013/11/26 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
保护环境倡议书500字
2014/05/19 职场文书
全运会口号
2014/06/20 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
python 模块重载的五种方法
2021/04/24 Python
Python OpenCV超详细讲解基本功能
2022/04/02 Python