I'm trying a very simple script using ThreeJS that generate a point where you click.
This is the function that adds 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 );
}
But it adds to the scene just the first point created. The curious thing is that in the same function i put the original example that generates random points, it doesn't just adds all the generated vertices, but it works every 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 );
}
What I did wrong in my life to deserve this illogical working?
Thank you!
For solving this problem I changed the logic of the click: I created a plane that i add to "objects" array
const geometry = new THREE.PlaneGeometry( 100, 100 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );
scene.add( plane );
objects.push(plane);
Then I get the coordinates from the intersection of the plane
var raycaster = new THREE.Raycaster(); // create once
var mouse = new THREE.Vector2(); // create once
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( objects );
console.log(intersects);
for(var int of intersects){
addPoint( int.point );
}
That's all
The current size of your points (1) is probably way too small so you don't see them. Besides keep in mind that you can't resize a geometry. Meaning if you create a buffer attribute, you can't push additional data afterwards which would exceed the buffer size. That means you always have to create your buffers with sufficient size and manage what part of the geometry should be rendered via BufferGeometry.drawRange().
Try it with the following code:
let camera, scene, renderer;
init();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 2000;
scene = new THREE.Scene();
//
const geometry = new THREE.BufferGeometry()
const vertices = [];
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);
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
//
const sprite = new THREE.TextureLoader().load('https://threejs.org/examples/textures/sprites/disc.png');
const material = new THREE.PointsMaterial({
size: 50,
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);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animate);
document.body.appendChild(renderer.domElement);
}
function animate() {
renderer.render(scene, camera);
}body {
margin: 0;
}<script src="https://cdn.jsdelivr.net/npm/three@0.133.1/build/three.min.js"></script>