Evergreen article: https://manu.ninja/webgl-three-js-annotations
Nice article! Thanks for sharing it.
This is a very cool and simple test and looks like it should work well for any objects that are fairly regular in shape.
const meshDistance = camera.position.distanceTo(mesh.position);
const spriteDistance = camera.position.distanceTo(sprite.position);
spriteBehindObject = spriteDistance > meshDistance;
sprite.material.opacity = spriteBehindObject ? 0.25 : 1;
annotation.style.opacity = spriteBehindObject ? 0.25 : 1;
I guess if your meshes are highly irregular it might not be good enough though. Would have to test this out in practice to see if that’s the case.
EDIT: and they are definitely doing something much fancier in Sketchfab:
1 Like
what effect is being discussed here? When it goes outside of fov, it just disappears on my machine.
@Popov72 that sounds like terribly overcomplicating things. Here is how I would do it: https://jsfiddle.net/25fjLrnd/
It’s the marker with the number 2 in my screenshot above. The question is how to make it transparent but still visible when occluded by the model.
1 Like
@makc3d Try to put a texture on the green cube. The hotspot should not be transparent if visible, only if it is occluded.
1 Like
not sure what does the texture change here, but https://jsfiddle.net/x5321dby/
all it does is simply draws the slightly transparent copy of a cube (marker) on top of everything. when not occluded, it draws on top of itself but since it is identical, the result does not change.
1 Like
@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 
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 
I will look into them 
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 
thanks
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 
), 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
1 Like
No demo, interesting article
1 Like
Another useful option, built with three.js:
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! 
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