Check this example I have created the hotspot/annotation but I can’t find a logic to detect a marker if it goes behind the camera’s field of view So I have tried a couple of methods already Based on distance between hotspot and camera didn’t work Angle between normal of hotspot and …

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); spriteBe…

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/

[image] pailhead: what effect is being discussed here? 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.

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.

@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, transparent with depth test disabled. @karanganesan is this good enough for your use case?

@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:

@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.

How to create Sketchfab like annotations with Three.js?

Questions

Popov72 February 8, 2020, 12:33pm 8

@makc3d Try to put a texture on the green cube. The hotspot should not be transparent if visible, only if it is occluded.

Topic		Replies	Views
Three.js hotspots Questions labels , annotations , hotspots	2	3504	April 13, 2020
Hotspot with animation Jobs animation , annotations	10	2184	April 13, 2020
How to add hotspot to 3d models? Questions labels , annotations , hotspots	3	8494	February 26, 2023
Help with sketchfab like annotations Questions labels , annotations , hotspots	4	1643	July 24, 2020
Adding a marker to 3D model Questions labels , hotspots	6	6441	November 19, 2020

How to create Sketchfab like annotations with Three.js?

Related topics