mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
101.79k stars 35.31k forks source link

Proposal w/ solution: Add virtual Desktop into three.js/editor/VR.viewport for immersive editing WebXR #26667

Open NicholiNoah opened 1 year ago

NicholiNoah commented 1 year ago

Description

The Three JS Editor is amazing, especially for WebXR. The current VR controls are still in development and don't yet allow text fields and drop boxes. Fortunately the desktop interface still works great while inside VR. A virtual-cam Desktop menu would be a second approach to controlling the immersive environment in real time, retaining full editing functionality with mouse and keyboard. Change positions and colors, add new objects to the scene, even write and play scripts. Very similar to a live coding environment (inspired by @brianpeiris RiftSketch)

Solution

I added a simple virtual Desktop window (webcam video texture) inside the VR environment. Like the editor's included interface, virtual Desktop is just a 2D plane. ( Theoretically, the HTML window could even be scaled/positioned over the menu portion of the Desktop mesh, retaining full UI interactivity. )

When entering the VR session, Player is prompted (on physical Desktop screen for security) to allow access to webcam / OBS virtual-camera. Once allowed, the selected input is projected onto the 2D plane within the VR environment.

demo video: https://youtu.be/uAaAXZa1Dwc Screenshot (27)

Alternatives

I was originally looking into WebRTC and all that, but that is way too advanced for me.

Additional context

My goal is to introduce solutions for building VR in VR, with minimal interjection, using only Three JS and zero added modules or libraries. This small feature opens a lot of potential for building immersive content while immersed in the content you're building.

*This virtual Desktop interface requires Player's headset to be connected/linked through their Desktop. For standalone headsets, vDesktop = false. Tethered/linked, vDesktop = true. That part hasn't been coded yet.

zhanghaidi commented 11 months ago

This idea is simply amazing!