基于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="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();

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

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