基于three.js实现特定Div容器的粒子特效封装

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

　　

---

　　效果图

　　移入库

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

　　Html页面指定容器

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

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

<srcipt>
    $(function(){
    //构造波动对象，指定dom元素，指定粒子颜色字符串
    var BodongObj=new Bodong($('#particles'),'#c0cbff');
    BodongObj.init();
    BodongObj.animate();
    })

</script>

　　第三方库下载链接

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

　　核心代码（bodong.js）

 function Bodong(domElement,color) {
     var SEPARATION = 100,
         AMOUNTX = 50,
         AMOUNTY = 50;
     var container;
     var camera, scene, renderer;
     var particles, particle, count = 0;
     var mouseX = -660,
         mouseY = -210;
     var windowHalfX = domElement.innerWidth() / 2;
     var windowHalfY = domElement.innerHeight() / 1;

     this.init = function() {
         container = document.createElement("div");
         container.id = "banner-canvas";
         document.getElementById("particles").appendChild(container);
         camera = new THREE.PerspectiveCamera(75, domElement.innerWidth() / domElement.innerHeight(), 1, 10000);
         camera.position.z = 1000;
         scene = new THREE.Scene();
         particles = new Array();
         var e = Math.PI * 2;
         var d = new THREE.ParticleCanvasMaterial({
             color: color||"#46c37b",
             program: function(f) {
                 f.beginPath();
                 f.arc(0, 0, 1, 0, e, true);
                 f.fill()
             }
         });
         var a = 0;
         for (var b = 0; b < AMOUNTX; b++) {
             for (var c = 0; c < AMOUNTY; c++) {
                 particle = particles[a++] = new THREE.Particle(d);
                 particle.position.x = b * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
                 particle.position.z = c * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
                 scene.add(particle)
             }
         }
         renderer = new THREE.CanvasRenderer();
         renderer.setSize(domElement.innerWidth(), domElement.innerHeight());
         container.appendChild(renderer.domElement);
         document.addEventListener("mousemove", this.onDocumentMouseMove, false);//整个页面监听鼠标移动事件
         domElement.on("resize", this.onWindowResize, false);
     }

     this.onWindowResize = function() {
         windowHalfX = domElement.innerWidth() / 2;
         windowHalfY = domElement.innerHeight() / 2;
         camera.aspect = domElement.innerWidth() / domElement.innerHeight();
         camera.updateProjectionMatrix();
         renderer.setSize(domElement.innerWidth(), domElement.innerHeight())
     }

     this.onDocumentMouseMove = function(a) {
         mouseX = a.clientX - windowHalfX;//水平移动距离
         mouseY = a.clientY - windowHalfY;//竖直移动距离
         mouseY=mouseY>0?-mouseY:mouseY;//防止视角上扬
     }

     this.onDocumentTouchStart = function(a) {
         if (a.touches.length === 1) {
             a.preventDefault();
             mouseX = a.touches[0].pageX - windowHalfX;
             mouseY = a.touches[0].pageY - windowHalfY
         }
     }

     this.onDocumentTouchMove = function(a) {
         if (a.touches.length === 1) {
             a.preventDefault();
             mouseX = a.touches[0].pageX - windowHalfX;
             mouseY = a.touches[0].pageY - windowHalfY
         }
     }

     this.animate = function() {
         requestAnimationFrame(this.animate.bind(this));//绑定this
         this.render()
     }

     this.render = function() {
         camera.position.x += (mouseX - camera.position.x) * 0.05;
         camera.position.y += (-mouseY - camera.position.y) * 0.05;
         camera.lookAt(scene.position);
         var a = 0;
         for (var b = 0; b < AMOUNTX; b++) {
             for (var c = 0; c < AMOUNTY; c++) {
                 particle = particles[a++];
                 particle.position.y = (Math.sin((b + count) * 0.3) * 50) + (Math.sin((c + count) * 0.5) * 50);
                 particle.scale.x = particle.scale.y = (Math.sin((b + count) * 0.3) + 1) * 2 + (Math.sin((c + count) * 0.5) + 1) * 2
             }
         }
         renderer.render(scene, camera);
         count += 0.08
     };

 }

 /*--------------------测试数据------------------------*/

 //var BodongObj=new Bodong($('#particles'),'#c0cbff');
 //BodongObj.init();
 //BodongObj.animate();

bodong.js

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

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