Drawing points as spheres not quads

Hello, so I’m trying to visualize data in 3D. I drew the data in 3D as pointmaterial and it gave me the pints as squares, how can I do it as spheres? i.e. draw a sphere centered at each point instead of the squares?

> 		var geometry = new THREE.BufferGeometry();
> 		geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
> 		geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
> 		geometry.addAttribute( 'label', new THREE.Float32BufferAttribute( info, 1 ) );
> 		geometry.computeBoundingSphere();
> 		var material = new THREE.PointsMaterial( { size: 0.03, vertexColors: THREE.VertexColors } );
> 		points = new THREE.Points( geometry, material );
> 		scene.add( points );

Hi!
Spheres or circles?

Hello, actually I need both, circles for 2D and spheres for 3D

It’s not so clear why you want it like that.

Take a look at this example: https://github.com/mrdoob/three.js/blob/master/examples/webgl_buffergeometry_instancing_billboards.html
And this one: https://threejs.org/examples/?q=bil#webgl_points_billboards

Oh thank you very much. Can you advice how to make onDocumentMouseDown only for the threejs canvas? like I have a page having the right half only for the threejs output and I need the mouse to change the color of the point clicked.
I tried the following by it didn’t work:

function onDocumentMouseDown( event ) {
event.preventDefault();
mouse.x = ((event.clientX) / renderer.domElement.clientWidth) * 2 - 1;
mouse.y = -((event.clientY) / renderer.domElement.clientHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
// find intersections
var geometry = points.geometry;
var attributes = geometry.attributes;
var intersects = raycaster.intersectObject( points, true );
if ( intersects.length > 0 ) {
if ( INTERSECTED != intersects[ 0 ].index ) {
console.log("Hit @ " + attributes.label.array[ INTERSECTED ]);
INTERSECTED = intersects[ 0 ].index;
}

} else if ( INTERSECTED !== null ) {
INTERSECTED = null;
}
}

Something like that:

renderer.domElement.addEventListener("mousedown", onDocumentMouseDown);
1 Like