Monday, 31 July 2023

Augmented reality (AR) into the three.js editor shows an empty scene

I am running the Three.JS open-source web editor (the source code is here) for my project, and modified it so it works as a standalone. I have configured the editor to satisfy my needs but now I wish to implement augmented reality. For that I'm adding an ARButton using the following code:

window.editor.renderer.xr.enabled = true;
const arButton = ARButton.createButton(window.editor.renderer);
document.body.appendChild(arButton);

Where window.editor.renderer is the project renderer. The problem is that when I click START AR, I'm sent on an empty AR playground even though I have added objects.

So I thought: maybe I'm not using the right renderer instance?

WebGLRenderer instances are created multiple times across the editor source code, but by testing each of them I believe the only one which truly matters is the instance created in Sidebar.Project.Renderer.js. I added, at the bottom of the createRenderer function, this line:

window.editor.renderer = currentRenderer;

Again, however, when I click START AR an empty scene pops-up. I also tried it on my phone (I usually use the WebXR API Emulator by Mozilla) and it's the same.

I don't understand and on top of that I can't find a minimal reproductible example. Every small test I do outside of the Three.JS editor works flawlessly.

Some screenshots: screenshot of the editor scene screenshot of the scene, empty



from Augmented reality (AR) into the three.js editor shows an empty scene

No comments:

Post a Comment