How can react-three-fiber be used with vr?

On:

https://threejs.org/docs/index.html#manual/en/introduction/How-to-create-VR-content

they explain:

Finally, you have to adjust your animation loop since we can’t use our well known window.requestAnimationFrame() function. For VR projects we use setAnimationLoop. The minimal code looks like this:

renderer.setAnimationLoop( function () {

	renderer.render( scene, camera );

} );

It’s not clear how this can be done in react-three-fiber. Any advice?

Thanks!

[setpixel]

@drcmda this is what we are working on built with react-three-fiber: https://youtu.be/70RNZHEc39Q

[drcmda]

@setpixel @Toseben i have a draft, but don’t know how to test without equipment. No idea how to run it and the web gives conflicting info. The official threejs examples don’t have that split screen, some websites use StereoEffect, no idea what to do next.

If you want to try, it looks like this currently:

import * as THREE from 'three'
import * as VR from '!exports-loader?WEBVR!three/examples/js/vr/WebVR'
import React from 'react'
import { Canvas } from 'react-three-fiber'

function App() {
  return (
    <Canvas vr onCreated={({ gl }) => document.body.appendChild(VR.createButton(gl))}>
      ..
    </Canvas>
  )
}

The exports loader thing is b/c webvr.js isn’t a module, but it could also be copied and exported properly. Other than that, supplying the “vr” attrib is enough to switch gl into vr mode and it’s using setAnimation instead of raf.

It’s out as 2.1.0-beta.0

Here’s a live demo: https://codesandbox.io/s/72225y7jmx