Currently, I am experimenting with a simple script using ThreeJS to create a point wherever you click on the screen.
Below is the function responsible for adding the point:
function addPoint(coord){
var geometry = new THREE.BufferGeometry();
var vertices = [];
const sprite = new THREE.TextureLoader().load( 'textures/disc.png' );
vertices.push( coord.x, coord.y, coord.z );
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
var material = new THREE.PointsMaterial( { size: 1, sizeAttenuation: true, map: sprite, alphaTest: 0.5, transparent: true } );
material.color.setHSL( 1.0, 0.3, 0.7 );
const particles = new THREE.Points( geometry, material );
//scene.add( particles );
group.add( particles );
}
However, it seems that only the first point created is being added to the scene. What's interesting is that when I include the original example that generates random points within the same function, it adds all the generated vertices and works each time you click:
for ( let i = 0; i < 10000; i ++ ) {
const x = 2000 * Math.random() - 1000;
const y = 2000 * Math.random() - 1000;
const z = 2000 * Math.random() - 1000;
vertices.push( x, y, z );
}
I can't figure out why the random point generator functions perfectly, while my simple script is struggling. Any insights would be greatly appreciated!
Thank you!