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