Javascript 使用three.js设置粒子的图像

我正在尝试修改此示例：

但是我想为每个粒子设置一个图像，而不是彩色粒子。我应该用立方体来做这个吗？或者有没有办法为

Vector3

设置图像

无论如何，下面是该示例的代码

        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var container, stats;
        var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color;
        var mouseX = 0, mouseY = 0;

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

        init();
        animate();

        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
            camera.position.z = 1000;

            scene = new THREE.Scene();
            scene.fog = new THREE.FogExp2( 0x000000, 0.0007 );

            geometry = new THREE.Geometry();

            for ( i = 0; i < 20000; i ++ ) {

                var vertex = new THREE.Vector3();
                vertex.x = Math.random() * 2000 - 1000;
                vertex.y = Math.random() * 2000 - 1000;
                vertex.z = Math.random() * 2000 - 1000;

                geometry.vertices.push( vertex );

            }

            parameters = [
                [ [1, 1, 0.5], 5 ],
                [ [0.95, 1, 0.5], 4 ],
                [ [0.90, 1, 0.5], 3 ],
                [ [0.85, 1, 0.5], 2 ],
                [ [0.80, 1, 0.5], 1 ]
            ];

            for ( i = 0; i < parameters.length; i ++ ) {

                color = parameters[i][0];
                size  = parameters[i][1];

                materials[i] = new THREE.PointCloudMaterial( { size: size } );

                particles = new THREE.PointCloud( geometry, materials[i] );

                particles.rotation.x = Math.random() * 6;
                particles.rotation.y = Math.random() * 6;
                particles.rotation.z = Math.random() * 6;

                scene.add( particles );

            }

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            container.appendChild( stats.domElement );

            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();
            stats.update();

        }

        function render() {

            var time = Date.now() * 0.00005;

            camera.position.x += ( mouseX - camera.position.x ) * 0.05;
            camera.position.y += ( - mouseY - camera.position.y ) * 0.05;

            camera.lookAt( scene.position );

            for ( i = 0; i < scene.children.length; i ++ ) {

                var object = scene.children[ i ];

                if ( object instanceof THREE.PointCloud ) {

                    object.rotation.y = time * ( i < 4 ? i + 1 : - ( i + 1 ) );

                }

            }

            for ( i = 0; i < materials.length; i ++ ) {

                color = parameters[i][0];

                h = ( 360 * ( color[0] + time ) % 360 ) / 360;
                materials[i].color.setHSL( h, color[1], color[2] );

            }

            renderer.render( scene, camera );

        }

if（！Detector.webgl）Detector.addGetWebGLMessage（）；
var容器，stats；
var摄影机、场景、渲染器、粒子、几何体、材质=[]、参数、i、h、颜色；
var mouseX=0，mouseY=0；
var windowHalfX=window.innerWidth/2；
var windowHalfY=window.innerHeight/2；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，13000）；
摄像机位置z=1000；
场景=新的三个。场景（）；
scene.fog=新的三个.FogExp2（0x000000，0.0007）；
几何体=新的三个。几何体（）；
对于（i=0；i<20000；i++）{
var顶点=新的三个向量3（）；
vertex.x=Math.random（）*2000-1000；
vertex.y=Math.random（）*2000-1000；
vertex.z=Math.random（）*2000-1000；
几何。顶点。推（顶点）；
}
参数=[
[ [1, 1, 0.5], 5 ],
[ [0.95, 1, 0.5], 4 ],
[ [0.90, 1, 0.5], 3 ],
[ [0.85, 1, 0.5], 2 ],
[ [0.80, 1, 0.5], 1 ]
];
对于（i=0；i

先谢谢你

---

另外，我是three.js的新手，所以任何帮助都会非常棒。

另一个示例演示了如何做到这一点：

---

blahhhh；哇，我瞎了。谢谢你的快速回答，杜布先生！，你太棒了。