特效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实现的雪花飘落特效相关推荐

  1. html js满屏飘雪特效,JS实现炫酷雪花飘落效果

    用js实现漂亮的雪花飘过效果: 步骤: 页面基本样式,雪花旋转动画效果 body{ width: 100vw; height: 100vh; background-color: #000; overf ...

  2. js截屏 video_用原生JS和html5进行视频截图并保存到本地

    Video视频截图 body, h1, h2, p { margin:0; padding:0; } html { font-family:"微软雅黑"; background-c ...

  3. JS实现逼真的雪花飘落特效

    逼真的雪花飘落特效 效果图: 图片素材 : --> ParticleSmoke.png 代码如下,复制即可使用: <!doctype html> <html> <h ...

  4. js 封装ajax方法吗,原生JS封装ajax方法

    jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...

  5. 用JavaScript实现网页雪花飘落特效

    不知道大家有没有看到过别人的网页有雪花飘落的特效,我当时看到真的觉得好好看,于是乎就去借鉴别人做的特效代码,最终将这个特效成功放到自己做的网页上啦~代码放到下面啦,可以自己设置颜色,雪花形状的大小,雪 ...

  6. 雪花飘落代码java_JS实现的雪花飘落特效示例

    本文实例讲述了JS实现的雪花飘落特效.分享给大家供大家参考,具体如下: 首先我们要创建一个HTML文件,将其命名为index.html Canvas - 雪花特效 *{ margin:0px; pad ...

  7. HTML5的canvas雪花飘落特效

    HTML5的canvas雪花飘落特效 一.html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  8. OpenCV-Python 雪花飘落特效

    来源:https://blog.csdn.net/LaoYuanPython/article/details/115298737 首先看一下目标效果: 素材准备 & 思路分析 本次雪花来源于如 ...

  9. OpenCV-Python图形图像处理:制作雪花飘落特效

    ☞ ░ 老猿Python博文目录:https://blog.csdn.net/LaoYuanPython ░ 一.引言 前几天有博友咨询,能否在视频中实现雪花飘落的效果,答案是肯定的.老猿前天简单构思 ...

  10. 【打造寒冬中的浪漫雪景——OpenCV-Python 雪花飘落特效】

    [打造寒冬中的浪漫雪景--OpenCV-Python 雪花飘落特效] 寒冬到来,想要为自己的网站或者APP增添一些浪漫雪景效果吗?那就别错过这篇OpenCV-Python实现雪花飘落特效的教程!本教程 ...

最新文章

  1. PCA、LDA、MDS、LLE、TSNE等降维算法的Python实现
  2. ASM-Net:可解释的美学评分及图像剪裁
  3. Java数据结构和算法(三)——冒泡、选择、插入排序算法
  4. Windows下各个盘中的文件夹属性变为隐藏,怎么取消隐藏属性
  5. 干货|且看Pyecharts如何制作多个子图
  6. Codeforces Round #246 (Div. 2)
  7. C#实现缩放和剪裁图片的方法示例
  8. $compile 手动编译
  9. nil,Nil,NULL,NSNull
  10. 《Scikit-Learn与TensorFlow机器学习实用指南》 第1章 机器学习概览
  11. php模式设计之 观察者模式
  12. K2 Blackpearl中从数据库直接删除流程实例之K2Server表
  13. Emacs自带小游戏
  14. 省时又省力的次世代角色流程也太!香!了!
  15. 企业微信登录本地调试
  16. Java程序员笔试面试之String5
  17. 运算放大器节点电压方程_区分运算放大器和电压比较器
  18. AAAI2020论文列表(中英对照)
  19. iOS 学习视频 资料集合 (视频 +博客)
  20. U盘中毒文件乱码怎么办

热门文章

  1. Android蓝牙4.0单车锁应用实例开发
  2. SI446x系列之路--基本操作
  3. 信息科学技术与创新之“信息纽带”
  4. Kernel 日志缓存大小修改
  5. 解决使用shutil.rmtree无法删除文件夹的方案
  6. css之子元素选择器、属性选择器、伪元素选择器
  7. sqlserver Month()函数取日期不足两位的加 0(转载)
  8. 如何操作电脑压缩包解压文件?干货技巧!电脑压缩包怎样进行文件解压?
  9. sunOracle t4系列小型机服务器配置详解
  10. python 类调用不存在的方法_找不到Python方法,但在类中定义