How to create Sketchfab like annotations with Three.js?

@makc That nearly works, but you want the marker to have opacity 1 when in front of the object and 0.3 when behind the object.

It’s not obvious when you use a cube but if you switch to a sprite you’ll see that doesn’t work as a marker.

Here’s an adaption of @makc3d’s idea. Two sprites, one fully opaque and one transparent with depth test disabled.

@karanganesan is this good enough for your use case?

4 Likes

@looeee IIRC sprites system was attached to 3js by a duct tape so I am not surprised that something does not work in that department. so, again, I would just use some hack like this https://jsfiddle.net/x8L1nwfh/ but this is now 3rd time, not making any more fiddles here :smiley:

1 Like

@makc3d Sorry, I did not see you used two sprites/cubes in your code, one with a standard material and the other with transparency/depth test=false!

It’s indeed a lot easier than my method.

1 Like

Thanks a lot everyone for the help :blush:I will look into them :100:

Yea I think so

I didn’t use sprites earlier
I just used Circle Geometry earlier

Will try out this sprite and let you know :slight_smile:

thanks :slight_smile:

1 Like

Sprites will make it easier to have the marker facing towards the camera, which is probably what you want.
Then you can use a transparent PNG to the make the sprite a circle - an abnoxious smiley in my example (sorry about that, it was just the first round transparent image I found on imgur :grin:), but to create markers with numbers in them you could either have a number of pre-made PNG files, or use canvas2D to generate the images on the fly.

Cool

Thanks for the suggestions :slight_smile:

1 Like

No demo, interesting article

1 Like

Another useful option, built with three.js:

https://modelviewer.dev/examples/annotations.html

3 Likes

@prisoner849 holy smokes you gotta see this: https://modelviewer.dev/examples/tester.html check add/remove hotspot bottom left then click anywhere in the scene to add the hotspot - thanks @donmccurdy for sharing, absolutely awesome sauce! :beers:

image

4 Likes

In this article, a file is shared initially. In that, if we click on any annotation like 1 or 2, the camera position is automatically changing to infrontof that annotation from the current position. But it is performed within sketchfab. But I need to do this thing within threejs. Can anyone please share the source code for it?

@jaya_kannan
Hi!
You can use GSAP library to move and rotate your camera smoothly from one point to another.
As an option: How to rotate the camera - gsap

1 Like

Thanks for your kind reply @prisoner849 . It is working now. thank you so much :smiley:

I need to know, how to control the speed of moving the camera in the GSAP. Please let me know, if you knew. @prisoner849

@jaya_kannan Would be cool to see how you do things in gsap.

Depends on your final goal, there are slightly different approaches I would use.

One of them: camera position, center of the model and position of the annotation form a triangle. You can find its normal and the angle between vectors (camera - center) and (annotation - center), then use .applyAxisAngle() for camera position around the normal, using GSAP.
Also, you can adjust camera’s position’s vector’s length, with GSAP, to avoid getting your camera inside the model after rotation.

Creativity is up to you :slight_smile:

1 Like

@jaya_kannan Just a very rough concept:
https://jsfiddle.net/prisoner849/hsjgLc4d/

4 Likes

Thank you so much @prisoner849. This is what exactly what I want. Thank you so much :smiley: :smiley: :smiley:

@prisoner849 Can you please explain the calculation of finding the path of the camera from current position to object position?

@jaya_kannan
Using this concept: