3D model and markers

Questions
1

EX: Start

I am trying to add markers on a 3D model, I am getting the position using a Raycaster, in the example, you will see a white box moving with the mouse, and when an interaction with the model occurs I can get the exact position where I want to add the marker.

The position of the marker in the 2D space is perfect but I can’t figure out how to hide it if it is not visible, I tried the code below but it dose not work right, please rotate the model you will see at some point the marker.

I do not understand exactly the intersection distances, they don’t seam to be right and I don’t know exactly what I do wrong.

Any help is appreciate it, I am lost in this :frowning:

   positionMarkers(){
       if(!this.markersAR) return;
       this.markersAR.forEach((marker, index) =>{

           // Get 2D screen position
           const markerScreenPosition = new THREE.Vector3(marker.markerPosition.x, marker.markerPosition.y, marker.markerPosition.z)
           markerScreenPosition.project(this.activeCamera);

           // Set the raycaster and  check the intersection
           this.markersRaycaster.setFromCamera(markerScreenPosition, this.activeCamera);
           const intersects = this.markersRaycaster.intersectObjects(this.model.children, true);

           console.log(intersects)
           
           if(intersects.length === 0){
               marker.show(true);
           }else{
               const modelIntersectionDistance = intersects[0].distance;
               const markerDistance = markerScreenPosition.distanceTo(this.activeCamera.position);

               console.log(modelIntersectionDistance, markerDistance)
               if(modelIntersectionDistance < markerDistance){
                   marker.show(true);
               }else{
                   marker.hide(true);
               } 
           }
       
           marker.x = this.width/2 - marker.width/2 + markerScreenPosition.x * this.width * 0.5;
           marker.y = this.height/2 - marker.height/2 + markerScreenPosition.y * this.height * -0.5;
       });
   }
2

I figured it out, I will add the code snippet after I finish the project, to help others as well.