Previously I was looking for answers about touch & select 3D objects in WebXR, which appears not to be possible. I was thinking about adding moving div elements to cover 3D objects and make them selectable by clicking on these divs. I found out in the forum how to get objects world position to scre…

Months ago I was struggling with a similar problem, namely creating user interfaces for VR. Using the DOM is ill-suited for this task, and it may be also for AR. I found that an alternative solution would be to create user interfaces with three.js and use them in the scene like any three.js object. …

Hi @felixmariotto thank you for the reply. I need this specifically for AR, there will be no controllers but the mobile device and only way to interact with the objects is touching the screen.

That’s definitely something you can do with raycasting, example here ( touch the buttons )

This is still a VR example, if this worked in AR with 3D drawn over camera feedback then it could be an option. Only controller input available is a ‘select’ event, which does not convey any info about where on the screen or what object was clicked. I am trying to solve this problem by using DOM ove…

@Sarge I am trying to implement the same now, It works in 3D view but not in AR mode. Have you been able to achieve overlaying the DOM to a mesh in AR mode? If yes please let me know your process. Btw, This is my code for overlaying the DOM on to the mesh //World space interaction annotation posit…

Hi Suraj, Sorry saw this message quite late. Yes indeed I solved the issue, will check that side project I was working on and will post you some code samples.

Hi people, Sorry, I forgot to update it here. I fixed this by creating a Raycaster and subscribing to touch events. Then every time a touch event listeners receive a message, I cast a ray to the scene from the camera and check the hits. Also you may need to correct the offsets of the mouse position…

No, I think you have misunderstood the requirement, To recap, I had implemented a DOM based UI and set it up so that it works like a worldspace UI. Due to the current state of the WebAR, It is not being positioned over the meshes in AR (It kindoff hovers somewhere over the mesh or be in the center …

Creating overlay for 3D objects in DOM layer in WebXR

Questions

Suraj_VIBROMECH March 1, 2022, 4:21am 8

Oh that’s great Sarge, Please send your code as soon as possible, I’ve been struggling with this issue.
Thanks

Topic		Replies	Views
How to add a UI to immersive-xr AR view? Questions webxr , user-interface	21	7513	December 4, 2024
Aligning DOM annotations with 3D objects in immersive-ar Questions 2d-overlay , html-overlay , augmented-reality , webxr , ar	1	985	February 27, 2024
Worldspace DOM object in WebAR not aligning to Mesh Questions html-overlay , dom , ar , webar	0	470	September 24, 2021
Is it possible to create HTML or CSS Button on THREE.js WebAR scene? Questions webxr , user-interface	4	2629	July 29, 2020
Way to raycast webAR AR.js Questions raycaster , ar	3	896	November 4, 2024

Creating overlay for 3D objects in DOM layer in WebXR

Related topics