html js满屏飘雪特效,原生js实现的雪花飘落特效
特效JS代码:
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container;
var particle;
var camera;
var scene;
var renderer;
var mouseX = 0;
var mouseY = 0;
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';
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 1000;
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++) {
particle = new Particle3D( material);
particle.position.x = Math.random() * 3000 - 1000;
particle.position.y = Math.random() * 3000 - 1000;
particle.position.z = Math.random() * 2000 - 1000;
particle.scale.x = particle.scale.y = 1;
scene.add( particle );
particles.push(particle);
}
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
setInterval( loop, 1500 / 60 );
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
//
function loop() {
for(var i = 0; i
{
var particle = particles[i];
particle.updatePhysics();
with(particle.position)
{
if(y
if(x>1000) x-=2000;
else if(x
if(z>1000) z-=2000;
else if(z
}
}
camera.position.x += ( mouseX - camera.position.x ) * 0.01;
camera.position.y += ( - mouseY - camera.position.y ) * 0.01;
camera.lookAt(scene.position);
renderer.render( scene, camera );
}
html js满屏飘雪特效,原生js实现的雪花飘落特效相关推荐
- html js满屏飘雪特效,JS实现炫酷雪花飘落效果
用js实现漂亮的雪花飘过效果: 步骤: 页面基本样式,雪花旋转动画效果 body{ width: 100vw; height: 100vh; background-color: #000; overf ...
- js截屏 video_用原生JS和html5进行视频截图并保存到本地
Video视频截图 body, h1, h2, p { margin:0; padding:0; } html { font-family:"微软雅黑"; background-c ...
- JS实现逼真的雪花飘落特效
逼真的雪花飘落特效 效果图: 图片素材 : --> ParticleSmoke.png 代码如下,复制即可使用: <!doctype html> <html> <h ...
- js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
- 用JavaScript实现网页雪花飘落特效
不知道大家有没有看到过别人的网页有雪花飘落的特效,我当时看到真的觉得好好看,于是乎就去借鉴别人做的特效代码,最终将这个特效成功放到自己做的网页上啦~代码放到下面啦,可以自己设置颜色,雪花形状的大小,雪 ...
- 雪花飘落代码java_JS实现的雪花飘落特效示例
本文实例讲述了JS实现的雪花飘落特效.分享给大家供大家参考,具体如下: 首先我们要创建一个HTML文件,将其命名为index.html Canvas - 雪花特效 *{ margin:0px; pad ...
- HTML5的canvas雪花飘落特效
HTML5的canvas雪花飘落特效 一.html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- OpenCV-Python 雪花飘落特效
来源:https://blog.csdn.net/LaoYuanPython/article/details/115298737 首先看一下目标效果: 素材准备 & 思路分析 本次雪花来源于如 ...
- OpenCV-Python图形图像处理:制作雪花飘落特效
☞ ░ 老猿Python博文目录:https://blog.csdn.net/LaoYuanPython ░ 一.引言 前几天有博友咨询,能否在视频中实现雪花飘落的效果,答案是肯定的.老猿前天简单构思 ...
- 【打造寒冬中的浪漫雪景——OpenCV-Python 雪花飘落特效】
[打造寒冬中的浪漫雪景--OpenCV-Python 雪花飘落特效] 寒冬到来,想要为自己的网站或者APP增添一些浪漫雪景效果吗?那就别错过这篇OpenCV-Python实现雪花飘落特效的教程!本教程 ...
最新文章
- PCA、LDA、MDS、LLE、TSNE等降维算法的Python实现
- ASM-Net:可解释的美学评分及图像剪裁
- Java数据结构和算法(三)——冒泡、选择、插入排序算法
- Windows下各个盘中的文件夹属性变为隐藏,怎么取消隐藏属性
- 干货|且看Pyecharts如何制作多个子图
- Codeforces Round #246 (Div. 2)
- C#实现缩放和剪裁图片的方法示例
- $compile 手动编译
- nil,Nil,NULL,NSNull
- 《Scikit-Learn与TensorFlow机器学习实用指南》 第1章 机器学习概览
- php模式设计之 观察者模式
- K2 Blackpearl中从数据库直接删除流程实例之K2Server表
- Emacs自带小游戏
- 省时又省力的次世代角色流程也太!香!了!
- 企业微信登录本地调试
- Java程序员笔试面试之String5
- 运算放大器节点电压方程_区分运算放大器和电压比较器
- AAAI2020论文列表(中英对照)
- iOS 学习视频 资料集合 (视频 +博客)
- U盘中毒文件乱码怎么办
热门文章
- Android蓝牙4.0单车锁应用实例开发
- SI446x系列之路--基本操作
- 信息科学技术与创新之“信息纽带”
- Kernel 日志缓存大小修改
- 解决使用shutil.rmtree无法删除文件夹的方案
- css之子元素选择器、属性选择器、伪元素选择器
- sqlserver Month()函数取日期不足两位的加 0(转载)
- 如何操作电脑压缩包解压文件?干货技巧!电脑压缩包怎样进行文件解压?
- sunOracle t4系列小型机服务器配置详解
- python 类调用不存在的方法_找不到Python方法,但在类中定义