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 );
Hello, actually I need both, circles for 2D and spheres for 3D
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