I've encountered an issue with a collection of points in an object (created using THREE.Points). An example of this can be seen at
https://threejs.org/examples/?q=points#webgl_interactive_pointsparticles.geometry.attributes.size.array[INDEX].needsUpdate, achieving complete invisibility seems to be a challenge. The objective is to hide the points based on their INDEX in the buffer geometry. Below is a snippet of the code from the example.
var vertices = new THREE.BoxGeometry( 200, 200, 200, 16, 16, 16 ).vertices;
var positions = new Float32Array( vertices.length * 3 );
var colors = new Float32Array( vertices.length * 3 );
var sizes = new Float32Array( vertices.length );
var vertex;
var color = new THREE.Color();
for ( var i = 0, l = vertices.length; i < l; i ++ ) {
vertex = vertices[ i ];
vertex.toArray( positions, i * 3 );
color.setHSL( 0.01 + 0.1 * ( i / l ), 1.0, 0.5 );
color.toArray( colors, i * 3 );
sizes[ i ] = PARTICLE_SIZE * 0.5;
}
var geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.setAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
geometry.setAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
//
var material = new THREE.ShaderMaterial( {
uniforms: {
color: { value: new THREE.Color( 0xffffff ) },
pointTexture: { value: new THREE.TextureLoader().load( "textures/sprites/disc.png" ) }
},
vertexShader: document.getElementById( 'vertexshader' ).textContent,
fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
alphaTest: 0.9
} );
//
particles = new THREE.Points( geometry, material );
scene.add( particles );
Implementing a change in 'size' on hover can be done as follows:
// function render() {
particles.rotation.x += 0.0005;
particles.rotation.y += 0.001;
var geometry = particles.geometry;
var attributes = geometry.attributes;
raycaster.setFromCamera( mouse, camera );
intersects = raycaster.intersectObject( particles );
if ( intersects.length > 0 ) {
if ( INTERSECTED != intersects[ 0 ].index ) {
attributes.size.array[ INTERSECTED ] = PARTICLE_SIZE;
INTERSECTED = intersects[ 0 ].index;
attributes.size.array[ INTERSECTED ] = PARTICLE_SIZE * 1.25;
attributes.size.needsUpdate = true;
}
I've explored shaders (which seem overly complex for this task) and experimented with creating a transparent material. Is there something I may have missed or overlooked in this implementation?
Thank you in advance for any guidance.