Update Point Color With Selection Box

Questions
1

I want to change the color of only my selected points, but my code seems to be changing the color of all points in the scene, not just the selected ones.

Code of interest:

//beginning comand
document.addEventListener( 'pointerdown', function ( event ) {

// #1 1/6 for coordinates on left hand side of screen
  selectionBox.startPoint.set(
    ((event.clientX - (window.innerWidth*1/6)) / concGui.offsetWidth)*2-1,
    - ( event.clientY / concGui.offsetHeight )*2+1,
    0.5 );
    //
    //console.log(((event.clientX - (window.innerWidth*1/6)) / concGui.offsetWidth)*2-1)
    //console.log(-( event.clientY / concGui.offsetHeight )*2+1)
} );


//while mouse is moving
document.addEventListener( 'pointermove', function ( event ) {

  if ( helper.isDown ) {
    //#2
    selectionBox.endPoint.set(
      ((event.clientX - (window.innerWidth*1/6)) / concGui.offsetWidth)*2-1,
      - ( event.clientY / concGui.offsetHeight )*2+1,
      0.5 );

    const allSelected = selectionBox.select();
    //this is the color for when you are mouse dragging  
    for ( let i = 0; i < allSelected.length; i ++ ) {
      if (allSelected[ i ].constructor.name == "Points") {

        allSelected[ i ].material.color.set( 0xFF7F00);
        
      }
    }

  }

} );

//when you unselect the left mouse
document.addEventListener( 'pointerup', function ( event ) {

  //#3
  selectionBox.endPoint.set(
    ((event.clientX - (window.innerWidth*1/6)) / concGui.offsetWidth)*2-1,
    - ( event.clientY / concGui.offsetHeight)*2+1,
    0.5 );

  const allSelected = selectionBox.select();
  
  for ( let i = 0; i < allSelected.length; i ++ ) {
    // filtering for points selected
    if (allSelected[ i ].constructor.name == "Points") {
      allSelected[ i ].material.color.set( 0xFF7F00);
      allSelected[ i ].geometry.colorsNeedUpdate=true
      console.log(allSelected)
     }
    else {
      //reset all the points to original color
      allSelected[ i ].material.color.set( 0x00FF00);
    }      
  }
} );

My selection box is accurate with selections, but as you can see in the example below, selecting the upper right (3) points causes all (4) points to turn orange.

changing material color

only 3 selected
only 3 selected725×313 11.1 KB

Any ideas where I went wrong? Full code on github

I am also looking for a good way to reset the color back to green if the points are deselected. Seems like I need to gather all points in the scene and reset them back to the original green color if they are not selected. Any guidance on this is appreciated.

Thanks!

2

I realized I was being dumb with my mouse down event and had inadvertently deleted this portion from the example with the selection box to reset the color of the points (example code) :

//beginning command
document.addEventListener( 'pointerdown', function ( event ) {
  //this resets all the colors of the selection box
  for ( const item of selectionBox.collection ) {

    item.material.color.set( 0x00FF00 );

  }

I still cannot figure out why my code changes all of the points in the scene to the orange color, my code seems to match the example, where only the selected points colors are changed.

Any guidance would be appreciated.

3

It seems that all points share one material.

4

It seems that all points share one material.

All the points do share the same material, can you not individually override the material color property? The example I linked seems to override the material emissive property on a case by case basis.

5

image
image771×431 17.4 KB

The example creates a new material for each object

6

Thank you!