3D model and markers

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:

       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)

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

           if(intersects.length === 0){
               const modelIntersectionDistance = intersects[0].distance;
               const markerDistance = markerScreenPosition.distanceTo(this.activeCamera.position);

               console.log(modelIntersectionDistance, markerDistance)
               if(modelIntersectionDistance < markerDistance){
           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;

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