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…
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.
`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.
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!
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();
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…