RAYCAST не будет выбирать динамически созданные линии на 3D-холсте, созданном с помощью three.js

Question

Я динамически создаю несколько точек на трехмерном холсте с помощью конструктора (используя three.js и javascript), используя набор координат XYZ, затем я динамически создаю линии также с помощью конструктора, между этими точками.Итак, когда я хочу выбрать эти строки, Raycaster не узнает их.Я попытался сделать те же строки без конструктора, просто загрузить браузер, и тогда он работает просто отлично.Кроме того, точка выбора работает нормально.все точки и лучи, которые я вставляю в массивы, называемые allJoints [] и allBeams [].

я пытался создать линии с THREE.MeshLIne, используя новые Float32Array, MeshLine (), setGeometry, MeshLineMaterial и THREE.Mesh, новозникает та же проблема.

//dots:
function Joint(jointX,jointY,jointZ,jointCounter) {
            console.log("nacrtaj tacku");
            this.jointX = jointX;
            this.jointY = jointY;
            this.jointZ = jointZ;
            this.jointNo = jointCounter;
            this.dot;
            this.deleteState = true;   
            this.makeDot = function () {
              let dotGeometry = new THREE.Geometry();
              dotGeometry.vertices.push(new THREE.Vector3( this.jointX, 
this.jointY, this.jointZ));
              let dotMaterial = new THREE.PointsMaterial( { size: 8, 
color:"#ffccff", sizeAttenuation: false} );
              this.dot = new THREE.Points( dotGeometry, dotMaterial )
            }
            this.drawDot = function () {       
              scene.add( this.dot );
              renderer.render( scene, camera );
            }
            this.makeDot();
            this.drawDot();
}

//Beams:
function Beam(firstNodeNo,secondNodeNo,beamCounter) {
            this.deleteState = true;
            this.firstNodeNo = allJoints[firstNodeNo].jointNo;
            this.secondNodeNo = allJoints[secondNodeNo].jointNo;
            this.beam;
            this.makeBeam = function () {
            let material = new THREE.LineBasicMaterial( { color: 0x0000ff 
} );
            let geometry = new THREE.Geometry();
            geometry.vertices.push( new THREE.Vector3( 
allJoints[firstNodeNo].jointX, allJoints[firstNodeNo].jointY, 
allJoints[firstNodeNo].jointZ),
            new THREE.Vector3( allJoints[secondNodeNo].jointX, 
allJoints[secondNodeNo].jointY, allJoints[secondNodeNo].jointZ) );
                this.beam = new THREE.Line( geometry, material );
            }
            this.drawBeam = function () {
                scene.add( this.beam );
             }
              this.makeBeam();
              this.drawBeam();

//raycaster:
class PickHelper {
constructor() {
  this.raycaster = new THREE.Raycaster();
  this.pickedObject0 = null;
  this.pickedObjectSavedColor0 = 0;
}
pick(normalizedPosition, scene, camera) {
  if (this.pickedObject0) {

this.pickedObject0.material.color.setHex(this.pickedObjectSavedColor0);
    this.pickedObject0 = undefined;
  }

  this.raycaster.setFromCamera(normalizedPosition, camera);
  const intersectedObjects = 
this.raycaster.intersectObjects(scene.children, true);
  if (intersectedObjects.length>0) {
        console.log('intersectedObjects[ 0 ].object.geometry.type = ' + 
intersectedObjects[ 0 ].object.geometry.type); 

    for (let i = 0; i < allJoints.length; i++) {
      if (intersectedObjects[0].object === allJoints[i].dot) {

        this.pickedObject0 = intersectedObjects[0].object;

        this.pickedObjectSavedColor0 = 
this.pickedObject0.material.color.getHex();

        this.pickedObject0.material.color.setHex(0xFF0000);
      }

    }
    for (let i = 0; i < allBeams.length; i++) {
      if (intersectedObjects[0].object === allBeams[i].beam){
        console.log('allBeams = ' + i);
}
}
}}}

//renderer:
function render() {if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}

pickHelper.pick(pickPosition, scene, camera);

renderer.render(scene, camera);

requestAnimationFrame(render);
}