Skeed hotspots with perspective camera

Questions
1

I am trying to add hotspots in a model viewer and is going well one issue that I have now is that the hotspots are a circle but when moving the perspective camera it gets skewed, is there any way to prevent this, I am looking at the sketchfab viewer and the hotspots are always round no matter where the camera is positioned how do they do that?

In the below image, the play hotspot should look like a circle but because of the perspective camera, it gets skewed…

x
x902×611 334 KB

2

Just guessing here, but I think your hotspots are physical 3D meshes, which get skewed due to the perspective of the camera. The ones from sktechfab are a separate 2D UI thats sitting on top of the (3D) canvas, e.g. just HTML elements like divs/buttons/etc or maybe even SVG.

3

No, they are not the actual hotspots are part of the scene just check with the inspector and yes I am using a perspective camera.

I was reading about 'constant screen size" it seems that this is what I need…

4

`Mhmm, the hotspots are overlayed HTML elements in the Sketchfab viewer. All you’d need to do is project from 3D to 2D coordinates and dynamically move the elements around.

image
image668×736 168 KB

5

That is just a point to position the hotspot test, the circle hotspot is added in 3d…

333
3331748×1128 233 KB

6

Hmm, what about this?

  1. Render 2 scenes:
    a. One perspective camera showing the actual scene
    b. One orthographic camera showing the circular hotspot buttons
  2. Render the perspective camera,
  3. disable autoClear on the renderer.
  4. Render the ortho camera so it overlays ontop of the scene.

(steps 2,3,4 are in the animation-loop).

An orthographic camera should get rid of the perspective distortion since it has no real perspective.

I’m not sure how to properly position the hotspots with the two different camera’s though, but this is at least the approach I would probably take.

You should be able to figure out if objects occlude the hotspot buttons to make them render transparent like Sketchfab does to complete the effect.

7

I understand but this is a big issue, I am at the beginning of the threejs journey I don’t have the skills for this task also the hotspots are part of the scene that contains the perspective camera since they do disappear if an object is in front… this is a hard one!

1 Like
8

I am trying to understand what you are asking. The sketchfab version is the one you want yours to work like ? And yours is the one below, where the perspective camera is skewing the orange play button ? Its kinda hard to see the skew ? Meaning your model is static ?

If thats the case, then this is how I would do this: Create 3D planes geometry, add those number textures on it. Make sure that the the geometry origin is at the center of the circle. Then quite simply lookAt the camera and thats it ? I think the circles have scaling applied aswell based on camera distance. I hope i understood you correct.

function animate() {
  target.copy(camera.position);
  model.lookAt(target);
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();
9

The solution is to use SpriteMaterial and set sizeAttenuation to false this will prevent the mesh from being distorted by the perspective camera, just in case someone might need a solution for this…

3 Likes
10

Ohh that’s smart. I thought of that but I would’ve expected that to skew too with the perspective of the camera in the edges of the screen :thinking:

11

I want the sphere to be the same no matter where it is when moving/zooming the camera and SpriteMaterial solves this issue using sizeAttenuation.

2 Likes