# Adding a marker to 3D model

**URL:** <https://discourse.threejs.org/t/adding-a-marker-to-3d-model/19472>\
**Category:** Questions\
**Tags:** labels, hotspots\
**Created:** [October 6, 2020, 12:45pm UTC](https://discourse.threejs.org/t/adding-a-marker-to-3d-model/19472 "2020-10-06T12:45:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gary7](https://avatars.discourse-cdn.com/v4/letter/g/58f4c7/32.png) [@Gary7](https://discourse.threejs.org/u/Gary7)\
**Post date:** [October 6, 2020, 12:45pm UTC](https://discourse.threejs.org/t/adding-a-marker-to-3d-model/19472/1 "2020-10-06T12:45:12Z")

</div>

Hey,

I’d like to add markers / hotspots to my 3D model by double clicking. I found one kind of example here: [https://hofk.de/main/discourse.threejs/2018/SetRemoveMarkers/SetRemoveMarkers.html](https://hofk.de/main/discourse.threejs/2018/SetRemoveMarkers/SetRemoveMarkers.html) but it doesn’t transfer to 3D models.

Is such a thing even possible?

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [October 6, 2020, 12:52pm UTC](https://discourse.threejs.org/t/adding-a-marker-to-3d-model/19472/2 "2020-10-06T12:52:30Z")

</div>

Probably best to use either [CSS2DRenderer](https://threejs.org/docs/#examples/en/renderers/CSS2DRenderer) or [Sprites](https://threejs.org/docs/#api/en/objects/Sprite) (if you need depth testing.)

---

<div class="post-metadata">

**Author:** ![Gary7](https://avatars.discourse-cdn.com/v4/letter/g/58f4c7/32.png) [@Gary7](https://discourse.threejs.org/u/Gary7)\
**Post date:** [October 7, 2020, 7:38am UTC](https://discourse.threejs.org/t/adding-a-marker-to-3d-model/19472/3 "2020-10-07T07:38:14Z")

</div>

This is as far as I’ve gotten. The marker gets added, but it isn’t stuck in the object. What am I doing wrong?

```javascript
function doubleClick(e) {

    mouse.x = (e.offsetX / (height * 1.75 + 20)) * 2 - 1;
    mouse.y = -(e.offsetY / (height + 20)) * 2 + 1;

    var vector = new THREE.Vector3(mouse.x, mouse.y, 1);
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObjects( obj2.children );

    if ( intersects.length > 0 )
    {
        var marker = new THREE.Sprite(spriteMaterial);
        marker.scale.set(20, 20, 1);
        marker.name = "marker" + markersCounter;
        raycaster.ray.at(300, marker.position);
        scene.add(marker);
        markers.push(marker);
        markersCounter++;
    }

       render();
```

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [October 7, 2020, 7:41am UTC](https://discourse.threejs.org/t/adding-a-marker-to-3d-model/19472/4 "2020-10-07T07:41:51Z")

</div>

Try adding your marker to the model, and not the scene. You will need to translate from the raycasters position to local coordinates.

See how the annotations are attached to the model in this example. This also use the CSS2DObjects and Sprites

> **[Glasses - Three.js Tutorials](https://sbcode.net/threejs/glasses/)**

See how I attach a geometry to a object using the raycaster in this example. Double click the monkey head.

> **[Raycaster - Three.js Tutorials](https://sbcode.net/threejs/raycaster/)**

---

<div class="post-metadata">

**Author:** ![Gary7](https://avatars.discourse-cdn.com/v4/letter/g/58f4c7/32.png) [@Gary7](https://discourse.threejs.org/u/Gary7)\
**Post date:** [October 7, 2020, 8:38am UTC](https://discourse.threejs.org/t/adding-a-marker-to-3d-model/19472/5 "2020-10-07T08:38:39Z")

</div>

Thanks a lot! Now I’m getting somewhere 🙂

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 5, 2020, 7:59am UTC](https://discourse.threejs.org/t/adding-a-marker-to-3d-model/19472/8 "2020-11-05T07:59:53Z")

</div>

I translated the above characters using google translate and it says,

“I added the tag to the model for the Shimo marker can only be seen in a particular direction Not in a particular direction can’t see all ah don’t want to turn on the depth test”

and

“Can you add WeChat or email to communicate?”

To answer your question, I think it easier to use google translate and then paste the translated version here instead . It seems to work pretty good and more people will have the opportunity to offer a solution to the question.

---

<div class="post-metadata">

**Author:** ![asdfasf](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asdfasf/32/14670_2.png) [@asdfasf](https://discourse.threejs.org/u/asdfasf)\
**Post date:** [November 19, 2020, 3:39am UTC](https://discourse.threejs.org/t/adding-a-marker-to-3d-model/19472/9 "2020-11-19T03:39:31Z")

</div>

use THREE.CSS2DRenderer If you use foreach loop to judge the display and hide of labels when the model is rotated, the model rotation will be stuck. Is there any better way to solve the problem of displaying and hiding labels on the model