360 video vr how to start VR session with custom button?

Hi guys.

I am new to three.js and I am learning.

I am building a 360-degree video and I want a custom button and when clicked goes in vr if supported., I managed to code the 360-degree video but I have no idea how to do the button, I don’t want to use the three.js button since this button has to be part of the player controller.

Is is possible to do this without the VR button for three.js, also I am using an older version, the project requires this so it is not ES6.

I managed to get the VR session started using navigator.xr.requestSession( ‘immersive-vr’ ) but the scene is not rendered , I get a message with the page can’t be displayed.

Any help or code examples are much appreciated it, I am going in circles for a week now…

Can you

One possibility is to look how VRButton initializes the VR mode and use the same approach, but with your button. The source is here:


Thank you!

I will give it a try!

I need a bit of help.

I have done a test here test , when the play button is clicked a VR session is starting, just click on the play button and the session will start.

With the WebXR emulator is working but on my Samsung Galaxy S9+ the session is starting but in the left and right windows there is a message “The page isn’t responding, you can wait for it or now”, what is happening?

Here is the js class that is starting the VR https://webdesign-flash.ro/ht/evp/js/FWDEVPVideoScreen.js, scroll down until the VR code is seen.

So it seams to be working but it does not render the scene…

Any help is appreciated, I am lost and I really want to implement this.

Thank you!

I have figured it out… man it was a tricky one.

I will post here once I am done so far I got it to work but there are no controls nothing…

Do you guys know some 3d mp4 samples like the one in the three.js demo but with sound and a bit longer, this one is too short and has no sound.

Ok, it’ 's me again I thought I had it all figured it out but is not that simple.

Now when clicking play the renderer is going into vr mode but for some reason even if it’s width and height is set correctly and the canvas width and height are set correctly the visual size of the canvas is smaller, can anybody explain why.

I really need help I am stuck.