Progressive WebXR

[apowers313]

Is your feature request related to a problem? Please describe.
Sometimes I want to work on my desktop. Sometimes I want to work in my VR headset. When exploring networks with all these awesome web components I want to have flexibility around which interaction model I use, and I want feature parity (drag & drop, controls, etc.) across the models -- without using different components. Basically I want Progressive WebXR.

I think this is timely because of all the interest around Meta Quest 3 and Apple Vision Pro as potential productivity platforms. :)

Describe the solution you'd like
Three.js has a VR / AR / XR mode that allows you to interact with the WebGL canvas in any mode. Rather than using A-Frame, you can have Progressive WebXR.

I've played around with this a bit and I've been able to modify the basic three-forcegraph render loop and add a VRButton / ARButton / XRButton to enter VR. (AR is especially fun :) ). I also tried monkeypatching _animationCycle in 3d-force-graph, but that didn't work for some reason. I'm also struggling to figure out how to get the VR controls to work in threejs.

Describe alternatives you've considered
I thought about creating logic for switching between the 3D / VR / XR components, but even with that there's such a discrepancy in features that it's not really going to be a progressive experience.

[apowers313]

Created PR #670 as an initial proof of concept.

[apowers313]

Proof of concept in BabylonJS: https://forum.babylonjs.com/t/3d-vr-ar-force-directed-graph/49886