Increase the size of words three.js

0

How can I solve the following issue?

I would like to increase the size of words that you are looking as a background on this page https://lovespeechgalaxy.xyz/love-galaxy/insert/navigate.php

How can achieve this and which parameter on my code should I change? How want to make them more readable (images are png).

My code

            import * as THREE from '../../build/three.module.js';

            import Stats from '../../jsm/libs/stats.module.js';

            import { GUI } from '../../jsm/libs/dat.gui.module.js';

            let camera, scene, renderer, stats, material, material2, material3, material4, material5, material6, material7;
            let mouseX = 0, mouseY = 0;

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

            init();
            animate();

            function init() {

                camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 2, 2000 );
                camera.position.z = 1000;

                scene = new THREE.Scene();
                scene.fog = new THREE.FogExp2( 0x0000020, 0.001 );
                
                

                const geometry = new THREE.BufferGeometry();
                const geometry2 = new THREE.BufferGeometry();
                const geometry3 = new THREE.BufferGeometry();
                const geometry4 = new THREE.BufferGeometry();
                const geometry5 = new THREE.BufferGeometry();
                const geometry6 = new THREE.BufferGeometry();
                const geometry7 = new THREE.BufferGeometry();

                const vertices = [];
                const vertices2 = [];
                const vertices3 = [];
                const vertices4 = [];
                const vertices5 = [];
                const vertices6 = [];
                const vertices7 = [];

    const sprite = new THREE.TextureLoader().load( '../../words/hate-words/fuckyou.png' );
                const sprite2 = new THREE.TextureLoader().load( '../../words/hate-words/bastard.png' );
                const sprite3 = new THREE.TextureLoader().load( '../../words/hate-words/idiot.png' );
                const sprite4 = new THREE.TextureLoader().load( '../../words/hate-words/bitch.png' );
                const sprite5 = new THREE.TextureLoader().load( '../../words/hate-words/nigger.png' );
                const sprite6 = new THREE.TextureLoader().load( '../../words/hate-words/faggot.png' );
                const sprite7= new THREE.TextureLoader().load( '../../words/hate-words/handicapped.png' );
                

                for ( let i = 0; i < 10000; i ++ ) {

                    const x = 4000 * Math.random() - 1000;
                    const y = 2000 * Math.random() - 1000;
                    const z = 2000 * Math.random() - 1000;

                    vertices.push( x, y, z );

                }
                
                for ( let i = 0; i < 10000; i ++ ) {

                    const x = 4000 * Math.random() - 1000;
                    const y = 2000 * Math.random() - 1000;
                    const z = 2000 * Math.random() - 1000;

                    vertices2.push( x, y, z );

                }
                
                for ( let i = 0; i < 10000; i ++ ) {

                    const x = 4000 * Math.random() - 1000;
                    const y = 2000 * Math.random() - 1000;
                    const z = 2000 * Math.random() - 1000;

                    vertices3.push( x, y, z );

                }
                
                                for ( let i = 0; i < 10000; i ++ ) {

                    const x = 4000 * Math.random() - 1000;
                    const y = 2000 * Math.random() - 1000;
                    const z = 2000 * Math.random() - 1000;

                    vertices4.push( x, y, z );

                }
                
                for ( let i = 0; i < 10000; i ++ ) {

                    const x = 4000 * Math.random() - 1000;
                    const y = 2000 * Math.random() - 1000;
                    const z = 2000 * Math.random() - 1000;

                    vertices5.push( x, y, z );

                }
                
                for ( let i = 0; i < 10000; i ++ ) {

                    const x = 4000 * Math.random() - 1000;
                    const y = 2000 * Math.random() - 1000;
                    const z = 2000 * Math.random() - 1000;

                    vertices6.push( x, y, z );

                }
                
                for ( let i = 0; i < 10000; i ++ ) {

                    const x = 4000 * Math.random() - 1000;
                    const y = 2000 * Math.random() - 1000;
                    const z = 2000 * Math.random() - 1000;

                    vertices7.push( x, y, z );

                }



                geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
                geometry2.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices2, 3 ) );
                geometry3.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices3, 3 ) );
                geometry4.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices4, 3 ) );
                geometry5.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices5, 3 ) );
                geometry6.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices6, 3 ) );
                geometry7.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices7, 3 ) );




                material = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite, alphaTest: 0.5, transparent: true } );
                material2 = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite2, alphaTest: 0.5, transparent: true } );
                material3 = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite3, alphaTest: 0.5, transparent: true } );
                material4 = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite4, alphaTest: 0.5, transparent: true } );
                material5 = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite5, alphaTest: 0.5, transparent: true } );
                material6 = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite6, alphaTest: 0.5, transparent: true } );
                material7 = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite7, alphaTest: 0.5, transparent: true } );
                
                


                

                const particles = new THREE.Points( geometry, material );
                scene.add( particles );
                
                const particles2 = new THREE.Points( geometry2, material2 );
                scene.add( particles2 );
                
                const particles3 = new THREE.Points( geometry3, material3 );
                scene.add( particles3 );
                
                const particles4 = new THREE.Points( geometry4, material4 );
                scene.add( particles4 );
                
                const particles5 = new THREE.Points( geometry5, material5 );
                scene.add( particles5 );
                
                const particles6 = new THREE.Points( geometry6, material6 );
                scene.add( particles6 );
                
                const particles7 = new THREE.Points( geometry7, material7 );
                scene.add( particles7 );

                //

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );
                renderer.setClearColor( 0x000000);

                //

            

                //

                const gui = new GUI();

                gui.add( material, 'sizeAttenuation' ).onChange( function (){ 

                    material.needsUpdate = true;

                } );

                gui.close();

                //

                document.body.style.touchAction = 'none';
                document.body.addEventListener( 'pointermove', onPointerMove );

                //

                window.addEventListener( 'resize', onWindowResize );

            }

            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 onPointerMove( event ) {

                if ( event.isPrimary === false ) return;

                mouseX = event.clientX - windowHalfX;
                mouseY = event.clientY - windowHalfY;

            }

            //

            function animate() {

                requestAnimationFrame( animate );

                render();
                stats.update();

            }

            function render() {

                const time = Date.now() * 0.00000000005;

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

                camera.lookAt( scene.position );

                const h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
                

                renderer.render( scene, camera );

            }

        </script>

Thank you so much