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

[gillesgw]

Hi ! I'm looking to do a VR experience with tresJS (for pruduction). Is this usable enought or too early ? Is there a wip documentation somewhere with a working example or not yet ?

Thanks

[Truemedia]

Hi ! I'm looking to do a VR experience with tresJS (for pruduction). Is this usable enought or too early ? Is there a wip documentation somewhere with a working example or not yet ?

Thanks

In my opinion it's still too early for production but there is ways of pulling off VR in tres, just very clunky and hacky solution at the moment that I wouldn't recommend (the discord channel and some github issues document the process of how I achieved a proof of concept with).

I am planning to pickup the project again at some point this year when I find I have free time again.

[gillesgw]

Ok thanks ! So you would recommend to stick to raw threejs if I want to use vuejs / nuxtjs for VR atm ?

[Truemedia]

Depending on your usage maybe. I’ve enjoyed using aframe which is a three js abstraction and component based (minus Vue) still actively maintained, and also react xr looks promising depending on how open you are to react. I think either of those three (no pun intended) are solid choices as they all use threejs anyway, and you could always port over your applications one day to tres xr once a lot more momentum has been gained with development.

…

On Thu, 27 Mar 2025 at 08:55, Gilles GW ***@***.***> wrote: Ok thanks ! So you would recommend to stick to raw threejs if I want to use vuejs / nuxtjs for VR atm ? — Reply to this email directly, view it on GitHub <#102 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACRQYNHT5D36LLJP2QNBET2WOVHHAVCNFSM6AAAAABM3X2VBGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONJXGIZTENRZGI> . You are receiving this because you authored the thread.Message ID: ***@***.***> [image: gillesgw]*gillesgw* left a comment (Tresjs/XR#102) <#102 (comment)> Ok thanks ! So you would recommend to stick to raw threejs if I want to use vuejs / nuxtjs for VR atm ? — Reply to this email directly, view it on GitHub <#102 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACRQYNHT5D36LLJP2QNBET2WOVHHAVCNFSM6AAAAABM3X2VBGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONJXGIZTENRZGI> . You are receiving this because you authored the thread.Message ID: ***@***.***>