How to create Sketchfab like annotations with Three.js?

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:

Thanks a lot @prisoner849 .

Hi @prisoner849 , I added some hotspots as you said. But there is a problem. Consider a cube (face1,face2,face3,face4,face5,face6). I have added the hotspot near face1 (front side). face2 is the opposite face to it (backside side of cube). Now I rotate the cube to see face 2. Now the hotspot is being behind face 1. Even it is behind of it, while clicking on the same X&Y axis on face 2, the function on hotspot is triggering. that is, I think the raycaster is triggering without considering the z axis. Sorry, if my statement is not clear.

This is good looking and yet the simplest !


this solution has a bug that when rotate model to back camera

Try this