将球体上的物体沿直线移动并返回原点

Question

我有2个球体1个内部和1个外部球体。在外球上我有128个粒子/精灵。 我想将 每个精灵/粒子 移出并远离球体到一定距离。 粒子/精灵必须像音频均衡器一样，从球体移动到一定距离，然后回到静止位置。 请你帮忙。

               var geometryInner = new THREE.SphereGeometry(60, 32, 32);
                geometryInner.applyMatrix( new THREE.Matrix4().makeScale( 1.0, 1.8, 1.0 ) );

                //var geometryMid = new THREE.SphereGeometry(90, 32, 32);
                var material = new THREE.ShaderMaterial({
                                    uniforms: uniforms,
                                    vertexShader: document.getElementById('vertexShaderGeneral').textContent,
                                    fragmentShader: document.getElementById('fragmentShaderLineColors').textContent,
                                    transparent: false
                                    });



                sphereInner = THREE.SceneUtils.createMultiMaterialObject( geometryInner, [
                                        material,
                                        new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true} )
                                        ]);

                // sphereInner.rotation.x = 0.3;
                // sphereInner.position.y = -30;
                scene.add(sphereInner);

//

                geometryOuter = new THREE.SphereGeometry(80, 32, 32);
                geometryOuter.applyMatrix( new THREE.Matrix4().makeScale( 1.0, 1.8, 1.0 ) );
                var materialOuter = new THREE.MeshLambertMaterial({color: 0xFF0000, transparent: true, opacity: 0.1});
                var sphereOuter = new THREE.Mesh(geometryOuter, materialOuter);

                scene.add(sphereOuter);

                points = THREE.GeometryUtils.randomPointsInGeometry( geometryOuter, particleCount );

                var pMaterial = new THREE.PointCloudMaterial({
                    color: 0xFFFFCC,
                    size: 20,
                    map: THREE.ImageUtils.loadTexture(
                    "particle.png"
                    ),
                    blending: THREE.AdditiveBlending,
                    opacity     : 0.8,
                    depthWrite  : false,
                    transparent: true
                    });


                // create the particle variables
                particles = new THREE.Geometry();
                // create the particle variables
                // now create the individual particles
                for (var p = 0; p < points.length; p++) 
                {
                    // create a particle with random
                    // position values, -250 -> 250

                    pX = points[p].x;
                    pY = points[p].y;                    
                    pZ = points[p].z;

                    // add it to the geometry
                    particles.vertices.push(point);
                }

                // create the particle system
                particleSystem = new THREE.PointCloud(particles,
                                                          pMaterial);
                // also update the particle system to
                // sort the particles which enables
                // the behaviour we want
                particleSystem.sortParticles = true;
                // add it to the scene
                scene.add(particleSystem);

我试过这个...当我渲染时。我只是需要一些帮助。

                function render() 
            {
                var timer = 0.0001 * Date.now();
                // add some rotation to the system
                //particleSystem.rotation.y += boost * 0.0001;
                var delta = clock.getDelta();

                   if(typeof array === 'object' && array.length > 0) {
                        var k = 0;
                        for(var i = 0; i < particleSystem.geometry.vertices.length ; i++) {
                                particleSystem.geometry.verticesNeedUpdate = true;
                                // particleSystem.position.z = boost/2;
                                particleSystem.geometry.vertices[k].z = array[i]/4 - 30; 
                                // geometryOuter.applyMatrix( new THREE.Matrix4().makeScale( 2, 1.8, 1.0 ) );
                                // particleSystem.rotation.y += array[2] * 0.0000005 ;
                                // sphereInner.rotation.z -= array[0] * 0.0000005;


                                // sphereInner.position.z = boost/3;
                                sphereInner.rotation.y += array[0] * 0.0000005;
                                uniforms.time.value -= array[0] * 0.0000005;
                                uniformsPlane.time.value += array[1] * 0.0000008;
                                k += (k < array.length ? 1 : 0);

                        }

                    }

                // uniforms2.time.value = clock.elapsedTime;
                // camera.position.x += ( mouseX - camera.position.x ) * .05;
                // camera.position.y += ( - mouseY - camera.position.y ) * .05;
                camera.lookAt( scene.position );
                renderText();
                // renderer.clear();
                effect.render( scene, camera );
            }

Answer 1

这是修复...

                       if(typeof array === 'object' && array.length > 0) {
                        var k = 0;
                        for(var i = 0; i < particleSystem.geometry.vertices.length ; i++) {
                            particleSystem.geometry.verticesNeedUpdate = true;
                            // particleSystem.position.z = boost/2;
                            if(array[k] == 0)
                            {
                                 particleSystem.geometry.vertices[k].z = points[k].z;

                            }
                            else if(points[k].z + array[k] + 100 < points[k].z)
                            {
                                particleSystem.geometry.vertices[k].z = points[k].z;
                            }
                            else
                            {
                                particleSystem.geometry.vertices[k].z =  points[k].z + array[k] + 100;// * 0.1  - 60;
                            }
                            // particleSystem.geometry.vertices[k].x = -array[i];
                            // particleSystem.geometry.vertices[k].y = array[i];
                            // geometryOuter.applyMatrix( new THREE.Matrix4().makeScale( 2, 1.8, 1.0 ) );
                            // particleSystem.rotation.y += array[2] * 0.0000005 ;
                            // sphereInner.rotation.z -= array[0] * 0.0000005;


                            // sphereInner.position.z = boost/3;
                            sphereInner.rotation.y += array[0] * 0.0000005;
                            uniforms.time.value -= array[0] * 0.0000005;
                            uniformsPlane.time.value += array[1] * 0.0000008;
                            k += (k < array.length ? 1 : 0);

                        }

                    }