Adding a marker to 3D model

Questions
,
1

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 but it doesn’t transfer to 3D models.

Is such a thing even possible?

2

Probably best to use either CSS2DRenderer or Sprites (if you need depth testing.)

3

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?

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();
4

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

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

1 Like
5

Thanks a lot! Now I’m getting somewhere :slight_smile:

8

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.

1 Like
9

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