VR Style Camera (Aframe implementation or ArrayCamera/StereoCamera from three

[Truemedia]

Description

I'm looking to migrate an Aframe project to tresJS to benefit from vue bindings however I'm struggling to setup the camera to work with a VR headset.

I've attempted loading the ArrayCamera and StereoGame classes built-in to threeJS and using the extend method in TresJS to be able to load them as components such as and but nothing works. I either get a blank black screen or a bluescreen with a line through it (when using the default example from the TresJS starter repo)

This is after being able to use without any issues and just swapping out the camera used. Would appreciate any ideas or info how to implement this thanks.

Suggested solution

Implement Array or StereoCamera as Tres JS native component preconfigured to work with VR.

Alternative

No response

Additional context

No response

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[Truemedia]

Iv'e figured out how to do this! and it works with only a small amount of code. Here goes the gist of the instructions for anyone that stumbles across this in future.

First you have to have to be able to run your site over HTTPS. VR functionality is not supported otherwise so you can install this vite plugin for the tres starter to server it with an SSL certificate https://www.npmjs.com/package/vite-plugin-mkcert

Next you have to add the Three JS vr button and hook it into Tres JS state using the useTres function (simply add state. on all variables within the Three JS code snippet).

• https://threejs.org/docs/#manual/en/introduction/How-to-create-VR-content
• https://tresjs.org/api/composables.html#usetres

Then add --host into the command under the scripts > dev section of your package.json

Rerunning vite and entering the IP address/port that vite gives you in the terminal for network then presents you with the normal TresJS pespective camera and clicking the VR button then goes into VR mode!

15 mins or less to setup

[alvarosabu]

@Truemedia should we move this to the XR package?

[Truemedia]

@Truemedia should we move this to the XR package?

Yeh makes sense to move it