本文基于three.js实现特定容器的粒子特效效果,支持用户传入特定的dom对象以及粒子颜色。

  


  效果图

  移入库

  1. <script src="jquery-1.11.3.min.js" type="text/javascript"> </script>
  2. <script src="three.min.js" type="text/javascript"></script>
  3. <script src="bodong.js" type="text/javascript"></script> 

  Html页面指定容器

  1. <!-- 波动动画 -->
  2. <div id="particles" style="width:100%; overflow:hidden; height:200px;background:#383232;"></div>

  创建波动示例并完成容器绑定

  1. <srcipt>
  2. $(function(){
  3. //构造波动对象,指定dom元素,指定粒子颜色字符串
  4. var BodongObj=new Bodong($('#particles'),'#c0cbff');
  5. BodongObj.init();
  6. BodongObj.animate();
  7. })
  8.  
  9. </script>

  第三方库下载链接

  http://v.bootstrapmb.com/2019/4/u0d54217/dom01/three.min.js

  核心代码(bodong.js)

  1. function Bodong(domElement,color) {
  2. var SEPARATION = 100,
  3. AMOUNTX = 50,
  4. AMOUNTY = 50;
  5. var container;
  6. var camera, scene, renderer;
  7. var particles, particle, count = 0;
  8. var mouseX = -660,
  9. mouseY = -210;
  10. var windowHalfX = domElement.innerWidth() / 2;
  11. var windowHalfY = domElement.innerHeight() / 1;
  12.  
  13. this.init = function() {
  14. container = document.createElement("div");
  15. container.id = "banner-canvas";
  16. document.getElementById("particles").appendChild(container);
  17. camera = new THREE.PerspectiveCamera(75, domElement.innerWidth() / domElement.innerHeight(), 1, 10000);
  18. camera.position.z = 1000;
  19. scene = new THREE.Scene();
  20. particles = new Array();
  21. var e = Math.PI * 2;
  22. var d = new THREE.ParticleCanvasMaterial({
  23. color: color||"#46c37b",
  24. program: function(f) {
  25. f.beginPath();
  26. f.arc(0, 0, 1, 0, e, true);
  27. f.fill()
  28. }
  29. });
  30. var a = 0;
  31. for (var b = 0; b < AMOUNTX; b++) {
  32. for (var c = 0; c < AMOUNTY; c++) {
  33. particle = particles[a++] = new THREE.Particle(d);
  34. particle.position.x = b * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
  35. particle.position.z = c * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
  36. scene.add(particle)
  37. }
  38. }
  39. renderer = new THREE.CanvasRenderer();
  40. renderer.setSize(domElement.innerWidth(), domElement.innerHeight());
  41. container.appendChild(renderer.domElement);
  42. document.addEventListener("mousemove", this.onDocumentMouseMove, false);//整个页面监听鼠标移动事件
  43. domElement.on("resize", this.onWindowResize, false);
  44. }
  45.  
  46. this.onWindowResize = function() {
  47. windowHalfX = domElement.innerWidth() / 2;
  48. windowHalfY = domElement.innerHeight() / 2;
  49. camera.aspect = domElement.innerWidth() / domElement.innerHeight();
  50. camera.updateProjectionMatrix();
  51. renderer.setSize(domElement.innerWidth(), domElement.innerHeight())
  52. }
  53.  
  54. this.onDocumentMouseMove = function(a) {
  55. mouseX = a.clientX - windowHalfX;//水平移动距离
  56. mouseY = a.clientY - windowHalfY;//竖直移动距离
  57. mouseY=mouseY>0?-mouseY:mouseY;//防止视角上扬
  58. }
  59.  
  60. this.onDocumentTouchStart = function(a) {
  61. if (a.touches.length === 1) {
  62. a.preventDefault();
  63. mouseX = a.touches[0].pageX - windowHalfX;
  64. mouseY = a.touches[0].pageY - windowHalfY
  65. }
  66. }
  67.  
  68. this.onDocumentTouchMove = function(a) {
  69. if (a.touches.length === 1) {
  70. a.preventDefault();
  71. mouseX = a.touches[0].pageX - windowHalfX;
  72. mouseY = a.touches[0].pageY - windowHalfY
  73. }
  74. }
  75.  
  76. this.animate = function() {
  77. requestAnimationFrame(this.animate.bind(this));//绑定this
  78. this.render()
  79. }
  80.  
  81. this.render = function() {
  82. camera.position.x += (mouseX - camera.position.x) * 0.05;
  83. camera.position.y += (-mouseY - camera.position.y) * 0.05;
  84. camera.lookAt(scene.position);
  85. var a = 0;
  86. for (var b = 0; b < AMOUNTX; b++) {
  87. for (var c = 0; c < AMOUNTY; c++) {
  88. particle = particles[a++];
  89. particle.position.y = (Math.sin((b + count) * 0.3) * 50) + (Math.sin((c + count) * 0.5) * 50);
  90. particle.scale.x = particle.scale.y = (Math.sin((b + count) * 0.3) + 1) * 2 + (Math.sin((c + count) * 0.5) + 1) * 2
  91. }
  92. }
  93. renderer.render(scene, camera);
  94. count += 0.08
  95. };
  96.  
  97. }
  98.  
  99. /*--------------------测试数据------------------------*/
  100.  
  101. //var BodongObj=new Bodong($('#particles'),'#c0cbff');
  102. //BodongObj.init();
  103. //BodongObj.animate();

bodong.js

  在线Dome效果链接(以整个网页为容器,本文在此基础上进行封装)

  http://v.bootstrapmb.com/2019/4/u0d54217/

基于three.js实现特定Div容器的粒子特效封装的更多相关文章

  1. 基于原生JS实现的Bean容器和AOP编程

    Bean是什么 我们知道Bean是Spring最基础的核心构件,大多数逻辑代码都通过Bean进行管理.NestJS基于TypeScript和依赖注入也实现了类似于Spring Bean的机制:服务提供 ...

  2. 基于slideout.js实现的移动端侧边栏滑动特效

    HTML5现在本领太大了,PC端已经无法满足它的胃口了,它将强势攻入移动端,所以移动端中各种特效也得基于HTML5实现,看看我们将要介绍的slideout.js,能帮我们实现怎么样的侧边栏滑动特效呢~ ...

  3. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  4. 基于Three.js的360X180度全景图预览插件

    基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10  HTML5中国 原文  http://www.html5cn.org/article-8621-1 ...

  5. 基于Three.js的360度全景--photo-sphere-viewer--简介

    这个是基于three.js的全景插件  photo-sphere-viewer.js  ---------------------------------------- 1.能添加热点: 2.能调用陀 ...

  6. 基于vue.js的简单用户管理

    功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...

  7. 基于 Egg.js 框架的 Node.js 服务构建之用户管理设计

    前言 近来公司需要构建一套 EMM(Enterprise Mobility Management)的管理平台,就这种面向企业的应用管理本身需要考虑的需求是十分复杂的,技术层面管理端和服务端构建是架构核 ...

  8. 基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计『转』

    本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...

  9. 基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]

    基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1] 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应 ...

随机推荐

  1. python入门(二十讲):爬虫

    什么是爬虫? 按照一定的规则,自动地抓取万维网信息的程序或脚本. 爬虫目的: 从网上爬取出来大量你想获取类型的数据,然后用来分析大量数据的类似点或者其他信息来对你所进行的工作提供帮助. 为什么选择py ...

  2. webpack-高级-发布策略

    webpack的发布策略 在实际开发中,一般会有两套项目方案: 一套是开发期间的项目,包含了测试文件.测试数据.开发工具.测试工具等相关配置,有利于项目的开发和测试,但是这些文件仅用于开发,发布项目时 ...

  3. Python 多任务(进程) day1(1)

    进程和程序的关系: 通俗来讲程序是死的不变的,进程是活的改变的.一个程序在没运行之前是程序,运行之后是进程 程序是一种电脑能识别的2进制代码,当你一直运行程序的时候,会出现多个进程(相当于菜谱和菜,照 ...

  4. linux shell seq命令详解

    seq: squeue  是一个序列的缩写,主要用来输出序列化的东西 seq常见命令参数 用法:seq [选项]... 尾数 或:seq [选项]... 首数 尾数 或:seq [选项]... 首数 ...

  5. jvm字节码助记符

    反编译指令 javap -c xxxx.class JVM参数设置 -xx:+<option>                  开启option -xx: -<option> ...

  6. GM2引擎脚本召唤宝宝说明

    功能:     脚本召唤宝宝. 格式: RECALLMOB 怪物名称 宝宝等级(最高为 7) 叛变时间(分钟) 是否自动变色(0.1)固定颜色(1-7) 攻击力受自动变色颜色不同而不同 固定颜色攻击力 ...

  7. jango 模型管理数据model,数据库外键主键与一对一,一对多,多对多关系

    四.models.py 定义和管理模型: 4.1模型class的属性就映射与数据库的字段参数 继承models.Model class TestClass(models.Model): 4.2在数据库 ...

  8. python 读写函数

    1.open 使用open打开文件后一定要记得调用文件对象的close()方法.比如可以用try/finally语句来确保最后能关闭文件. file_object = open('thefile.tx ...

  9. JS高级---原型的简单的语法

    原型的简单的语法 构造函数,通过原型添加方法,以下语法,手动修改构造器的指向 实例化对象,并初始化,调用方法 <!DOCTYPE html> <html lang="en& ...

  10. vue 中监听页面滚动

    监听页面滚动 在methods中定义一个方法 handleScroll() { //获取滚动时的高度 let scrollTop = window.pageYOffset || document.do ...