Using map to change the shape of a particle

Questions
1

I want to change the shape of a particle using map. I’ve written the following code, but I get an error.

image

function init() {
				container = document.querySelector('.mainBody');
				document.body.appendChild( container );
				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.z = 1000;
				scene = new THREE.Scene();
        var vertices = [];
        // scene.background = new THREE.Color('linear-gradient( to right, yellow, red )');

				var numParticles = AMOUNTX * AMOUNTY;
				var positions = new Float32Array( numParticles * 3 );
				var scales = new Float32Array( numParticles );
				var i = 0, j = 0;
				for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
					for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
						positions[ i ] = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 ); // x
						positions[ i + 1 ] = 0; // y
						positions[ i + 2 ] = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 ); // z
						scales[ j ] = 1;
						i += 3;
						j ++;
					}

				}
        vertices.push( positions[ i ], positions[ i + 1 ], positions[ i + 2 ] );
        
				var geometry = new THREE.BufferGeometry();
				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
				geometry.addAttribute( 'scale', new THREE.BufferAttribute( scales, 1 ) );

        var circle = new THREE.TextureLoader().load( './spark1.png' );

        var material = new THREE.PointsMaterial( { size: 5, map:'circle', transparent: true, alphaTest: 0.5} );
				material.color.setHSL( 1.0, 1.0, 1.0 );

				particles = new THREE.Points(geometry, material);
				scene.add( particles );

function render() {
				camera.position.x += ( mouseX - camera.position.x ) * .05;
				camera.position.y += ( - mouseY - camera.position.y ) * .05;
				camera.lookAt( scene.position );
				var positions = particles.geometry.attributes.position.array;
				var scales = particles.geometry.attributes.scale.array;
				var i = 0, j = 0;
				for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
					for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
						positions[ i + 1 ] = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
										( Math.sin( ( iy + count ) * 0.5 ) * 50 );
						scales[ j ] = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 8 +
										( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 8;
						i += 3;
						j ++;
					}
				}
				particles.geometry.attributes.position.needsUpdate = true;
				particles.geometry.attributes.scale.needsUpdate = true;
				renderer.render( scene, camera );
				count += 0.1;
			}

Can you help me with this?

2

Hi!

here,
map:'circle'
should be
map:circle - name of a variable instead of a string

The other question is where and how do you set mouseX and mouseY?
And the main question: could you provide a live code example with your problem? (jsfiddle, codepen etc.)