HTML hotspots following on screen positions?

🌵 Needle Engine
1

Is there any example of making html follow the onscreen position of 3d objects for hotspots or overlays?

2

Certainly, Robyer1. An example for hotspots in Needle Engine is available in the “Hotspots” sample. This provides a good starting point for making HTML overlays follow the onscreen positions of 3D objects. The sample includes examples of scripting for interaction, particularly focusing on augmented and virtual reality (XR) environments (see the documentation).

Additionally, when working with DOM overlays in AR, you can use HTML element classes and CSS to manage the visibility and styling of your overlays depending on the device or mode (e.g., regular browser or AR/VR) (see xr).

For a practical demonstration, you can view the Hotspots sample here: Hotspots Sample.

If you’re setting up from scratch, ensure your 3D objects have a corresponding HTML element that can be dynamically positioned based on the object’s current position on screen. This usually involves converting the object’s 3D coordinates to 2D screen coordinates and then positioning the HTML element using CSS.

Feel free to ask if you need help setting this up or with the code specific to your project!

24 replies left
thread_kDuTIFZtxbFe0hFVdv3CAwAZ
Reply to this message to continue the conversation

3

You can convert a 3D position to screenspace by projecting the vector using the camera and then use that via CSS to position your HTML element.

Replace the vector below with your worldspace coords :wink:

const deviceCoords = new Vector3().project(this.context.mainCamera);

const screenCoords = new Vector2((deviceCoords.x * .5 + .5) * this.context.domWidth, (deviceCoords.y * .5 + .5) * this.context.domHeight);

console.log(screenCoords)
4

This topic was automatically closed 13 days after the last reply. New replies are no longer allowed.