Able to move the camera throughout the scene? about react-360 HOT 13 CLOSED

Since the camera lives entirely outside of the React scene, it's currently controllable from the Runtime code found in vr/client.js. We're still documenting these bits, but the VRInstance object exports a camera, which is used to construct the rendered output. If you look at the samples available for download from https://developer.oculus.com/webvr, you'll find a folder called CubeSample which shows some of the ways that you can modify this code, and ways to interface between React and the runtime.

Right now, if you want to modify the camera object, the best way is to update it from within the custom render() method found in client.js. You can access the camera object at vr.player.camera — right now, it is a standard Three.js PerspectiveCamera.
We are currently exploring APIs to allow camera manipulation (and multi-camera setups) from within React. Feedback like this helps us prioritize that work, and better understand the use-cases developers expect. However, I should mention that one of the reasons we did not prioritize camera manipulation APIs for this initial release is because camera movement can often produce motion sickness in VR, and is typically not recommended.

from react-360.

Here's a basic example of how you might teleport the camera from the React side. First, we create a NativeModule to allow communication back and forth between the two:

// vr/client.js
import {Module, VRInstance} from 'react-vr-web';

class TeleportModule extends Module {
  constructor() {
    super('TeleportModule');
    this._camera = null;
  }

  setCamera(camera) {
    this._camera = camera;
  }

  teleportCamera(x, y, z) {
    if (this._camera) {
      this._camera.position.set(x, y, z);
      // Call this to make sure anything positioned relative to the camera is set up properly:
      this._camera.updateMatrixWorld(true);
    }
  }
}

function init(bundle, parent, options) {
  const teleportModule = new TeleportModule();
  const vr = new VRInstance(bundle, 'Demo', parent, {
    // Add custom options here
    nativeModules: [ teleportModule ],
    ...options,
  });

  teleportModule.setCamera(vr.player.camera);

  vr.render = function(timestamp) {
    // Any custom behavior you want to perform on each frame goes here
    
  };
  // Begin the animation loop
  vr.start();
  return vr;
}

window.ReactVR = {init};

Then, within your React app, make sure you import NativeModules from 'react-vr', and you can access TeleportModule at NativeModules.TeleportModule. With that, you could teleport the camera in an event handler:

import {
  // ...
  NativeModules,
  // ...
} from 'react-vr';

//....
function someEventHandler() {
  NativeModules.TeleportModule.teleportCamera(someX, someY, someZ);
}
// ...

from react-360.

Beautiful, this is super helpful.

I am currently a student at Hack Reactor in Los Angeles, and my team and I are exploring the idea of building a WebVR application for our thesis project. We definitely appreciate the prompt and detailed response.

Thanks,
Nate

from react-360.

If you look at the samples available for download from https://oculus.com/webvr, you'll find a folder called CubeSample which shows some of the ways that you can modify this code, and ways to interface between React and the runtime.

Just small correction: you mean https://developer.oculus.com/webvr/, correct?

from react-360.

@cvan yessir, sorry that's what I get for typing urls from memory. I'll update my comment above.

from react-360.

This example is great and works well at moving the camera through, however using
this._camera.rotation
from the Three.js API doesn't appear to make any changes. The position.set works, but rotation doesn't appear to.

Any pointers?

from react-360.

@willschipp any luck making the camera rotate with _camera.rotation or any other method? I'm having the same issue.

from react-360.

@willschipp @lapat Any luck? I'm having the same issue. I've been trying various thing including this._camera.projectionMatrix.set()

from react-360.

If you're moving the camera, I highly recommend using the <Scene> element, which was added since this question was first asked.

Assuming Scene is the top-level element, any style transforms (<Scene style={{transform: [...]}} />) applied to the Scene are actually applied to the user's camera, allowing you to directly manipulate the camera from React.

from react-360.

Awesome! works great, thanks @andrewimm

from react-360.

Is there any good way to animate updating the scene transform to simulate something like walking? I can do it easily enough when I use a setInterval to update transform variables in state, and it works ok in a pure webview on the laptop, but the lag is horrible when I go to mobile (not sure if this is just due to a faster animation loop on the hardware, or using native components).

I tried setting the main view to an animated view and then updating the scene with animated variables, but this just resulted in a blank screen with the normal camera controls disabled. Any thoughts?

from react-360.

react-vr-walk

Walk around your ReactVr app with WASD!

https://github.com/apoeco/react-vr-walk

https://github.com/apoeco/react-vr-walk/blob/master/index.js

from react-360.

@andrewimm Hello, I followed your 'TeleportModule', there was a problem. I called teleportCamera in index.vr.js. I wanted to control the camera movement with axismove, but the position of the previous camera would be reset whenever the headset was moved. Is there any help?

from react-360.