React-360: [Question] how to get camera instance in index.vr.js?

Created on 27 Jun 2017  路  3Comments  路  Source: facebookarchive/react-360

I have seen the issue about accessing the camera in index.vr.js but I cannot seem to get the camera instance. I tried VrInstance.camera() and it says that it is undefined. if someone can give me a complete example on how to access the camera in index.vr.js that would be great. I'm trying to use this function and I need the camera

`import * as THREE from 'three';

export function get3DPoint(camera,x,y){

var mousePosition = new THREE.Vector3(x, y, 0.5);

mousePosition.unproject(camera);

var dir = mousePosition.sub(camera.position).normalize();

dir.y = dir.y + 0.05;

return dir;

}

thank you for your time`

Most helpful comment

Your application is built of two components: the React code (index.vr.js, which describes the scene) and the runtime (client.js, which manages all of the rendering).

Behavior relating to the rendering aspects, such as how it is displayed on a page (mouse position) or how it is turned into pixels (camera) is the responsibility of the runtime, and the React side is intentionally unaware of details like that. There are many different ways to render a given scene, but only one way to describe it across platforms, so we have to draw a line to let the same code run in a VR headset as on a desktop web browser.

client.js allows you to hook into the rendering details like the camera (vr.player.camera), as well as running custom code on each frame. The code you're describing here looks like it should be implemented there. If you need the information in React, you can send events across the bridge.

// sending events in client.js
vr.rootView.context.callFunction('RCTDeviceEventEmitter', 'emit', ['eventName', [/* event args */]]);

// receiving events in index.vr.js
const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
RCTDeviceEventEmitter.addListener(
  'eventName',
  (e) => { /* process event */ },
);

All 3 comments

Your application is built of two components: the React code (index.vr.js, which describes the scene) and the runtime (client.js, which manages all of the rendering).

Behavior relating to the rendering aspects, such as how it is displayed on a page (mouse position) or how it is turned into pixels (camera) is the responsibility of the runtime, and the React side is intentionally unaware of details like that. There are many different ways to render a given scene, but only one way to describe it across platforms, so we have to draw a line to let the same code run in a VR headset as on a desktop web browser.

client.js allows you to hook into the rendering details like the camera (vr.player.camera), as well as running custom code on each frame. The code you're describing here looks like it should be implemented there. If you need the information in React, you can send events across the bridge.

// sending events in client.js
vr.rootView.context.callFunction('RCTDeviceEventEmitter', 'emit', ['eventName', [/* event args */]]);

// receiving events in index.vr.js
const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
RCTDeviceEventEmitter.addListener(
  'eventName',
  (e) => { /* process event */ },
);

Awesome, thank you very much its clear to me now

@andrewimm I used vr.rootView.conext.callFunction, I think its deprecated now because I get thrown the error "vr is undefined"

Was this page helpful?
0 / 5 - 0 ratings