Selection Box Not Registering Updating Scene

Questions
1

I have some code that visually updates my scene, but the selection box does not seem to be registering the user input updates. Probably easier to explain with a video:

Recording 2022-08-13 at 14.57.01

In the video, I use the table on the left hand side of the screen to up the point position attribute and the scene updates correctly. The code fails though when using the selection box tool again on the moved node. Selecting the updated position fails, but selecting the original position works.

My code:

tbody.onchange = function (e) {
  e = e || window.event; // || is or
  var data = [];
  var target = e.srcElement || e.target;
  while (target && target.nodeName !== "TR") {
      target = target.parentNode;
  }
  if (target) {
      var cells = target.getElementsByTagName("input");
      var ind = target.rowIndex - 1
      var x_pnt = cells[0].value
      var y_pnt = cells[1].value
      for (var i = 0; i < cells.length; i++) {
          data.push(cells[i].value);
      }
  }
  allSelectedPnts[ind].geometry.attributes.position.needsUpdate
  allSelectedPnts[ind].geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [x_pnt,y_pnt,0], 3 ) );

How can I make my selection box find the updated point location?

Full code on github if interested.

2

I have done some research, looks like I was missing a true at the end of my needsUpdate and need to call the needsUpdate command inside my animate loop.

let frame = 0
function animate() {
  frame += 0.1
  tbody.onchange = function (e) {
    e = e || window.event; // || is or
    var data = [];
    var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
        target = target.parentNode;
    }
    if (target) {
        var cells = target.getElementsByTagName("input");
        var ind = target.rowIndex - 1
        var x_pnt = cells[0].value
        var y_pnt = cells[1].value
        for (var i = 0; i < cells.length; i++) {
            data.push(cells[i].value);
        }
        allSelectedPnts[ind].geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [x_pnt,y_pnt,0], 3 ) );
        allSelectedPnts[ind].geometry.attributes.position.needsUpdate = true;
        console.log(allSelectedPnts[ind].geometry.attributes.position.needsUpdate = true);
    }
  };
  requestAnimationFrame( animate );
  renderer.render( scene, camera );
  
}
animate();

Still getting the same error though, any thoughts are appreciated. Thanks!

3

I was able to solve this by deleting the old point and making a new point. Still not sure why the code does not work in my old setup. Seems like the scene for the selection box is not updating for some reason.

tbody.onchange = function (e) {
  e = e || window.event; // || is or
  var data = [];
  var target = e.srcElement || e.target;
  const selectionBox = new SelectionBox( camera, scene );
  const helper = new SelectionHelper(selectionBox, renderer, 'selectBox' );
  while (target && target.nodeName !== "TR") {
      target = target.parentNode;
  }
  if (target) {
      var cells = target.getElementsByTagName("input");
      var ind = target.rowIndex - 1
      var x_pnt = cells[0].value
      var y_pnt = cells[1].value
      for (var i = 0; i < cells.length; i++) {
          data.push(cells[i].value);
      }
      // allSelectedPnts[ind].geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [x_pnt,y_pnt,0], 3 ) );
      // allSelectedPnts[ind].geometry.attributes.position.needsUpdate = true;
      scene.remove(allSelectedPnts[ind])
      var tempDotGeo = new THREE.BufferGeometry();
      tempDotGeo.setAttribute( 'position', new THREE.Float32BufferAttribute( [x_pnt,y_pnt,0], 3 ) );
      var selectedDotMaterial = new THREE.PointsMaterial( { size: 0.5, color: 0xFF7F00 } );
      var tempDot = new THREE.Points( tempDotGeo, selectedDotMaterial );
      scene.add( tempDot );
  }
};

Recording 2022-08-14 at 18.30.04

If anyone has any ideas on what was going wrong the old setup, I would still be interested in understanding.