在三个js中使用粒子的磁效应

Question

我使用以下代码基于官方的Three.js示例之一：

        var SCREEN_WIDTH = window.innerWidth,
        SCREEN_HEIGHT = window.innerHeight,

        mouseX = 0, mouseY = 0,

        windowHalfX = window.innerWidth / 2,
        windowHalfY = window.innerHeight / 2,

        SEPARATION = 200,
        AMOUNTX = 10,
        AMOUNTY = 10,

        camera, scene, renderer, startx, starty, startz, currentx, currenty, currentz;

        init();
        animate();

        function init() {

            var container, separation = 100, amountX = 50, amountY = 50,
            particles, particle;

            container = document.createElement('div');

            var currentDiv = document.getElementById("container");
        currentDiv.appendChild(container);
            $('#container > div').hide();


            camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
            camera.position.z = 1000;

            scene = new THREE.Scene();

            renderer = new THREE.CanvasRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
            renderer.setClearColor( 0xe0e0e0, 1);
            container.appendChild( renderer.domElement );

            // particles

            var PI2 = Math.PI * 2;
            var material = new THREE.SpriteCanvasMaterial( {

                color: 0x0000ee,
                program: function ( context ) {

                    context.beginPath();
                    context.arc( 0, 0, 0.5, 0, PI2, true );
                    context.fill();

                }

            } );

            group = new THREE.Group();
            scene.add( group );

            for ( var i = 0; i < 200; i ++ ) {

                particle = new THREE.Sprite( material );
                startx = particle.position.x = Math.random() * 2 - 1;
                starty = particle.position.y = Math.random() * 2 - 1;
                startz = particle.position.z = Math.random() * 2 - 1;
                particle.position.normalize();
                particle.position.multiplyScalar( Math.random() * 1 + 450 );
                particle.scale.multiplyScalar( 2 );
                group.add( particle );

            }


            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            document.addEventListener( 'touchstart', onDocumentTouchStart, false );
            document.addEventListener( 'touchmove', onDocumentTouchMove, false );

            //

            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize() {

            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        //

        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 animate() {

            requestAnimationFrame( animate );

            render();

        }

        setTimeout( function(){

            $('#container > div').fadeIn(3000);
        }, 1000 );



        function render() {

            camera.position.x += ( mouseX - camera.position.x ) * .05;
            camera.position.y += ( - mouseY + 20 - camera.position.y ) * .05;
            camera.lookAt( scene.position );



            for (var i = 0; i < group.children.length; i++) {
                group.children[i].position.x += Math.random() * 2 - 1;
                group.children[i].position.y += Math.random() * 2 - 1;
                group.children[i].position.z += Math.random() * 2 - 1;
                /*currentx = group.children[i].position.x;
                currenty = group.children[i].position.y;
                currentz = group.children[i].position.z;

                if (Math.sqrt(mouseX*mouseX+currentx*currentx)<330 && Math.sqrt(mouseY*mouseY+currenty*currenty)<330) {


                    var boosterx = (mouseX==group.children[i].position.x) ? '' : 1;
                    var boostery = (mouseY==group.children[i].position.y) ? '' : 1;

                    group.children[i].position.x += boosterx;
                    group.children[i].position.y += boostery;*/
                }


            }

            renderer.render( scene, camera );

        }

一切正常但有一种效果我无法开始工作。我希望粒子在到达某一点后光标接近时做出反应（类似磁铁的效果 - 光标越近，粒子朝向它越快）。我知道可能很难实现，因为有一些3d / 2d翻译。当谈到3d canvas和js时，我是菜鸟，但有些东西告诉我它可以完成。我试图在我自己这样做，那就是最后的杂乱部分（评论）来自哪里。谢谢！