# 3D model and markers

**URL:** <https://discourse.threejs.org/t/3d-model-and-markers/56552>\
**Category:** Questions\
**Created:** [September 30, 2023, 6:12pm UTC](https://discourse.threejs.org/t/3d-model-and-markers/56552 "2023-09-30T18:12:23Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tibi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tibi/32/61300_2.png) [@Tibi](https://discourse.threejs.org/u/Tibi)\
**Post date:** [September 30, 2023, 6:12pm UTC](https://discourse.threejs.org/t/3d-model-and-markers/56552/1 "2023-09-30T18:12:23Z")

</div>

EX: [Start](https://webdesign-flash.ro/ht/emv/)

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 ☹

```javascript
   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;
       });
   }

```

---

<div class="post-metadata">

**Author:** ![Tibi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tibi/32/61300_2.png) [@Tibi](https://discourse.threejs.org/u/Tibi)\
**Post date:** [October 1, 2023, 6:14pm UTC](https://discourse.threejs.org/t/3d-model-and-markers/56552/2 "2023-10-01T18:14:11Z")

</div>

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