Description

Bug:

When looking around in AR mode on mobile with cursorEnabled: true the click event is oddly delegated to where the user taps on screen, not the cursor's position. Furthermore, the onClick handler only reliably happens when the user is simultaneously hovered over the element (looking directly at it and succesfully triggered onEnter) with the white cursor and tapping directly in the center of the screen.

This is unintuitive and seems like a bug or an oversight.

It is more intuitive for the click event to be delegated to the element currently eclipsed by the white VR cursor centered in the middle of the screen. That way someone can hover over something like a VRButton to trigger the onEnter event, and then tap anywhere on screen to trigger the onClick event.

Otherwise, if they look at the element the onEnterwill invoked but then when they tap/click on screen the onClick will not be invoked. This makes it incredibly difficult to figure out how to click on things while using a react-vr app.

Expected behavior

Given I am on mobile
And have not yet entered into VR Mode
And I have cursor enabled
When I hover over a VR element (like VRButton)
And see the onEnter handler execute
When I tap anywhere on screen
I expect the onClick handler to execute

Actual behavior

Given I am on mobile
And have not yet entered into VR Mode
And I have cursor enabled
When I hover over a VR element (like VRButton)
And see the onEnter handler execute
When I tap anywhere on screen
The onClick handler does not execute

When I tap directly in the center of the screen
The onClick handler does execute

Logs

N/A

Reproduction

Open up CubeSample (it has cursorEnabled set to true by defaulted) on a mobile browser (I was using iOS10 Safari). Orient your phone so that you're VR cursor is hovering over the VRButton on screen and invoking the onEnter handler. Now tap anywhere on screen besides the direct center. The onClick handler which changes the color is not invoked. I

To get the onClick to invoke you must hover over the element and press directly in the center of the screen.

Solution

Divert the click event to the element I have entered/hovered on aka the element being directly looked at in the middle of the screen and eclipsed by the white dot.

Additional Information

• react-vr package version: 0.1.1
• react-vr-web package version: 3.10.9
• Operating System: OSX/iOS10
• Graphics Card: iPhone
• Browser: Safari and Chrome for iOS10
• VR Device: Technically none. Just a mobile phone. A desktop simulating mobile would also suffice.

Description

Installing app and trying to run using:
react-vr init MyAppName
cd MyAppName
npm start

Expected behavior

Start server

Actual behavior

I get an error:

npm ERR! Darwin 16.1.0
npm ERR! argv "/usr/local/Cellar/node/7.0.0/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v7.0.0
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `node node_modules/react-native/local-cli/cli.js start`
npm ERR! Exit status 11
npm ERR! 
npm ERR! Failed at the [email protected] start script 'node node_modules/react-native/local-cli/cli.js start'.

full npm-debug copy log

Additional Information

• react-vr package version: [0.1.0]
• react-vr-web package version: [0.1.0]
• Operating System: [MacOS Sierra 10.12.1]
• Graphics Card: [Intel Iris]
• Browser: [Chrome 54 or Firefox 49 ]
• VR Device: [Browser ]

Description

Currently React VR does not give you access or allow you to create your own camera.
I think this would be pretty helpful in case we want to manipulate the "player" location.

For example I implemented basic support for VR controllers using a native module, it makes sense that in the future i'd like to move around with either full locomotion (analog sticks) or teleportation (blink mechanic).

Solution

This can be fixed in 2 ways and should probably be implemented via both to allow maximum flexibility.

1. Allow to pass a camera via VRInstance options object and pass it to the new Player invocation
2. Implement a function on the VRInstance class that returns the current camera.

Description

How specified custom IP address for start development server?
I development in MacOS therefore need to launch browser in Windows on VirtualBox.

Expected behavior

Dev server started on custom IP address.

Actual behavior

Dev server only started on localhost:8081.

Additional Information

• React VR version: react-vr-web
• Operating System: MacOS
• Graphics Card: Intel
• Browser: Firefox nightly
• VR Device: Out of VR

Description

Any plans to support a CSS3D-based renderer so that content creators can use HTML to create UIs?

There is an old renderer written by @mrdoob (code found elsewhere since it's no longer in the Three.js repo) that still works today and could be used in concert with a typical Three.JS scene. It ignores any entities which aren't of type THREE.CSS3DObject so you can intermingle them with your standard THREE.Object3D objects in a single scene.

Some issues that come to mind that would need to be tackled:

• Stereoscopic rendering would need to output two DOMs - one for each camera. Given that we have a nice virtual DOM courtesy of React this should be solvable at the vDOM -> browser DOM layer.
• z-depth and occlusion could be solved by wrapping each THREE.CSS3DObject in a THREE.Object3D container which contains the DOM element and a mirroring Plane* with its blending set to THREE.NoBlending. This would effectively create a properly z-sorted occlusion of the CSS3D content. All transformations would be applied to the wrapper THREE.Object3D container. (*NOTE: Occlusion would only appear correct for rectangular content- extra considerations would need to be made for content with rounded corners for instance.)
• User interaction- To support common DOM events the CSS3D renderer/s should be placed on top of the WebGL canvas. You could then use the capture phase of the CSS3D renderer's div to proxy and redispatch the event into the canvas. If the event wouldn't have hit the occlusion plane then the original event can be canceled and prevent propagation into the regular DOM content. There may need to be some special consideration for how this would work in the stereo-DOM scenario... For instance, you could proxy the event into the duplicate DOM to allow CSS-based [hover] interactions; however, you'd need to ensure only one of the renderers executes JS-based callbacks so that there aren't undesirable side-effects such as double-execution.

I'm assuming this wouldn't be a near-term feature for ReactVR, but curious if it's on the road map and how desirable the feature is.

Thanks!

I noticed that you use a web worker to run react reconciliation and react native's batched bridge to communicate between the main and worker thread.

I also noticed that some of the messages (typically when bootstrapping) passed between UI thread and worker are JSON.stringified, while the actual commands related to exec, flush, and invoke (in BRIDGE_CODE in createRootView.js) are not JSON.stringified.

I was wondering if you guys have any perf data to indicate that sending plain JavaScript objects for this specific case works better.

P.S: I was playing with running react on a worker for the DOM, and noticed that JSON.stringify does indeed send messages much faster.

Description

The Default VR mode is only support with Oculus Rift & Gear VR,

Is it possible to use webvr-polyfill in react-vr like this example?

http://googlevr.github.io/webvr-polyfill/examples/basic/

or maybe there's another way to support mobile Web Browser VR mode?

thanks.

Description

When creating a pano component with an array of cubic images as input, the textures are flipped on the y axis. This is caused by the THREE.cubeTexture which sets the flipY property to false.

Expected behavior

the cubic images should be shown with the correct orientation

Actual behavior

the cubic images are shown upside down

Reproduction

Create a View Component with a pano component in it:

<View
              <Pano source={{uri: ['image_r.jpg', 'image_l.jpg', 'image_d.jpg', 'image_u.jpg', 'image_f.jpg', 'image_b.jpg']}}/>
</View>

On rendering the error should be seen.

Solution

In the class RCTPano, the callback of the loading function should be changed at line 124. Adding the line

texture.flipY = true;

will solve the problem.

Additional Information

• React VR version: react-vr-web
• Operating System: MacOS
• Graphics Card: Nvidia
• Browser: Chromium 44.0.2383.0, Carmel
• VR Device: GearVR

Description

I'm not able to run the samples locally (OSX Sierra). This is despite running brew install --HEAD watchman, as per the resolution of a similar issue three months ago.

Expected behavior

I'm able to kick off the application with npm start and browse the samples on localhost.

Actual behavior

Alack! The file watcher explodes - even after manually installing watchman via brew.

Logs

ERROR  Error watching file for changes: EMFILE
{"code":"EMFILE","errno":"EMFILE","syscall":"Error watching file for changes:","filename":null}
Error: Error watching file for changes: EMFILE
    at exports._errnoException (util.js:1023:11)
    at FSEvent.FSWatcher._handle.onchange (fs.js:1283:11)

...

npm ERR! @ start: `node node_modules/react-native/local-cli/cli.js start --root .`
npm ERR! Exit status 11
npm ERR! 
npm ERR! Failed at the @ start script 'node node_modules/react-native/local-cli/cli.js start --root .'.

Environment details

• react-vr package version: preview package
• Operating System: OS X Sierra

Description

The prev and next buttons in the docs are switched.

Expected behavior

At the bottom of a page, the next button should be on the right and the prev button on the left.

Actual behavior

At the bottom of a page, the next button is on the left and the prev button on the right.

Reproduction

Go to any page in the docs.

Solution

Update the next and prev classes in react-native/css/react-native.css to be:

.docs-prev {
  float: left;
}

.docs-next {
  float: right;
}

Additional Information

• React VR version: react-vr
• Operating System: MacOS
• Graphics Card: [FILL THIS OUT: NVIDA, ATI, Intel? Which Driver?]
• Browser: Chrome, and Safari
• VR Device: Out of VR (in documentation)

Description

So at first I was trying to use the audio module provided by you, but turns out it didn't work quite well. I spent some time working on it and now it supports 2D Audio using the WebAudio API. I think the most important issue about the code is that it tried to play the file even when it wasn't even loaded (since it was an asynchronous call), that and the fact that I wasn't able to make it work on custom components.

Solution

After spending some time digging through the source code I came with the solution to add an AudioSampleLoader (which I borrowed from https://github.com/ScottMichaud/AudioSampleLoader) and integrated it with the existing VRAudioBufferSource. That and a few methods and private functions here and there, which you can see here https://github.com/DilipRamirez/custom-ovr-audio (if is there any better way to share the code, like a fork or something, I would be happy to republish it).
Also, I introduced some Promises, but looking back i'm not so sure whether it is actually necessary.

But the code works haha.

Thank you and hopefully this code helps in development!

Hello,

This seems really awesome framework!
I would like to see some demo or sample project.
But I cannot check the my project on the browser.
Starting server has some issue, it cannot watch or sth.
I got the following log:

Please, help to figure this out.

Thank you
Best regards,

Mudin

Additional Information

• react-vr package version: 0.1.1
• react-vr-web package version: 0.1.1
• Operating System: MacOS
• Graphics Card: Intel Iris Pro 1536 MB
• Browser: Chrome 54.0.2840.98 (64-bit)
• VR Device: Google Cardboard

Description

I am trying to get a 360 video to play in react-vr. There is nothing about this in the docs, but poking through the React-vr-web folder I found the RCTVideoModule file, which seems designed to handle this. Are there any resources you can point me towards in terns of getting this running?

Thank you,
Nate

Description

I will try three.js in ReactVR so first of all I want run your Cube Sample in my project to see how it works. I have made all the same as you in the sample but finally I have some errors in the console and nothing to see on the screen.

Logs

GET http://localhost:8081/vr/client.bundle?platform=vr localhost/:14
GET http://localhost:8081/vr/client.bundle?platform=vr 500 (Internal Server Error) localhost/:14
Uncaught ReferenceError: ReactVR is not defined at (index):17

Reproduction

Here is my index.html:

<head>
  <title>Krzysztof Gwóźdź | Portfolio</title>
  <style>body { margin: 0; }</style>
<head>
<body>
  <!-- When you're ready to deploy your app, update this line to point to your compiled client.bundle.js -->
  <script src="./client.bundle?platform=vr"></script>
  <script>
    // Initialize the React VR application
    ReactVR.init(
      // When you're ready to deploy your app, update this line to point to
      // your compiled index.bundle.js
      '../index.vr.bundle?platform=vr&dev=true',
      // Attach it to the body tag
      document.body
    );
  </script>
</body>

and client.js:

  import {VRInstance} from 'react-vr-web';
  import {Module} from 'react-vr-web';
  import * as THREE from 'three';

  function init(bundle, parent, options) {
    const scene = new THREE.Scene();
    const cubeModule = new CubeModule();

    const vr = new VRInstance(bundle, 'Portfolio', parent, {
      // Add custom options here
      cursorEnabled: true,
      cursorVisibility: 'visible';
      nativeModules: [ cubeModule ],
      scene: scene,
    });

    const cube = new THREE.Mesh(
      new THREE.BoxGeometry(1, 1, 1),
      new THREE.MeshBasicMaterial(),
    );
    cube.position.z = -4;
    scene.add(cube);

    cubeModule.init(cube);

    vr.render = function(timestamp) {
      // Any custom behavior you want to perform on each frame goes here
      const seconds = timestamp / 1000;
      cube.position.x = 0 + (1 * (Math.cos(seconds)));
      cube.position.y = 0.2 + (1 * Math.abs(Math.sin(seconds)));
    };
    // Begin the animation loop
    vr.start();
    return vr;
  };

  export default class CubeModule extends Module {
    constructor() {
      super('CubeModule');
    }

    init(cube) {
      this.cube =  cube;
    }

    changeCubeColor(color) {
      this.cube.material.color = new THREE.Color(color);
    }
  }

  window.ReactVR = {init};

Additional Information

• react-vr package version: 0.1.0
• react-vr-web package version: 0.1.0
• Operating System: MacOS X El Capitan 10.11.6
• Graphics Card: Intel Iris 1536 MB
• Browser: Chrome 55.0.2883.95 (64-bit)

I would be thankful for your help.

Description

I'm preparing a talk for a local meetup about React VR and I've noticed some typos in the documentation that I wanted to fix. I've noticed that there's a handy link on bottom of each page:

Unfortunately all links of this type are redirecting me to a 404 page.

Expected behavior

A documentation reader should be able to propose fixes for typos etc. (since it's an open source project)

Actual behavior

All aforementioned links take the reader to a 404 page.

Logs

N/A

Reproduction

N/A

Solution

I'm not sure whether the site is actually supposed to be open source so I'd rather not recommend anything. If it's in fact open source - I'd be happy to help :)

Additional Information

N/A

Hi all,

I'm having a lot of fun playing with react-vr!

One question, is there/will there be Pano support for rendering stereo equirectangular images in the future?

I tried using the following image with all different the different options for the source prop but no luck.

Thanks!
Cody

Description

So can we build Android & iOS app?

Documentation could be improved to talk more about how to access the 'Samples' as it may be missed.
http://localhost:8081/Samples/

I manually installed these as I thought they are needed.
npm install -g react-native-cli
npm install -g npm-cli

Then I get this error:
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v5.4.0
npm ERR! npm v3.3.12
npm ERR! code ELIFECYCLE
npm ERR! @ start: node node_modules/react-native/local-cli/cli.js start --root .
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script 'node node_modules/react-native/local-cli/cli.js start --root .'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node node_modules/react-native/local-cli/cli.js start --root .
npm ERR! You can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:

Support File:
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle @~prestart: @
6 verbose lifecycle @~prestart: unsafe-perm in lifecycle true
7 verbose lifecycle @~prestart: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;E:\Github\react-vr\node_modules.bin;C:\Users\Fasani\AppData\Local\GitHub\PortableGit_d7effa1a4a322478cd29c826b52a0c118ad3db11\cmd;C:\Users\Fasani\AppData\Local\GitHub\PortableGit_d7effa1a4a322478cd29c826b52a0c118ad3db11\usr\bin;C:\Users\Fasani\AppData\Local\GitHub\PortableGit_d7effa1a4a322478cd29c826b52a0c118ad3db11\usr\share\git-tfs;C:\Users\Fasani\AppData\Local\Apps\2.0\TQ2WCTZX.CX4\E3VNEB33.2W8\gith..tion_317444273a93ac29_0003.0003_665ccbdbd3c2d8d4;C:\Users\Fasani\AppData\Local\GitHub\lfs-amd64_1.3.1;C:\Users\Fasani\AppData\Local\Apps\2.0\TQ2WCTZX.CX4\E3VNEB33.2W8\gith..tion_317444273a93ac29_0003.0003_665ccbdbd3c2d8d4\NativeBinaries\x86;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files\nodejs;C:\Program Files (x86)\ATI Technologies\ATI.ACE\Core-Static;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Users\Fasani\AppData\Roaming\npm;C:\Program Files (x86)\HMA! Pro VPN\bin;C:\Users\Fasani\AppData\Local\Microsoft\WindowsApps;;C:\Program Files (x86)\MSBuild\14.0\bin;C:\Program Files (x86)\Microsoft SDKs\Windows\v8.1A\bin\NETFX 4.5.1 Tools\x64
8 verbose lifecycle @~prestart: CWD: E:\Github\react-vr
9 silly lifecycle @~prestart: Args: [ '/d /s /c',
9 silly lifecycle 'node -e "try{require('fs').statSync('node_modules')}catch(e){process.exit(1)}" || npm install' ]
10 silly lifecycle @~prestart: Returned: code: 0 signal: null
11 info lifecycle @~start: @
12 verbose lifecycle @~start: unsafe-perm in lifecycle true
13 verbose lifecycle @~start: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;E:\Github\react-vr\node_modules.bin;C:\Users\Fasani\AppData\Local\GitHub\PortableGit_d7effa1a4a322478cd29c826b52a0c118ad3db11\cmd;C:\Users\Fasani\AppData\Local\GitHub\PortableGit_d7effa1a4a322478cd29c826b52a0c118ad3db11\usr\bin;C:\Users\Fasani\AppData\Local\GitHub\PortableGit_d7effa1a4a322478cd29c826b52a0c118ad3db11\usr\share\git-tfs;C:\Users\Fasani\AppData\Local\Apps\2.0\TQ2WCTZX.CX4\E3VNEB33.2W8\gith..tion_317444273a93ac29_0003.0003_665ccbdbd3c2d8d4;C:\Users\Fasani\AppData\Local\GitHub\lfs-amd64_1.3.1;C:\Users\Fasani\AppData\Local\Apps\2.0\TQ2WCTZX.CX4\E3VNEB33.2W8\gith..tion_317444273a93ac29_0003.0003_665ccbdbd3c2d8d4\NativeBinaries\x86;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files\nodejs;C:\Program Files (x86)\ATI Technologies\ATI.ACE\Core-Static;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Users\Fasani\AppData\Roaming\npm;C:\Program Files (x86)\HMA! Pro VPN\bin;C:\Users\Fasani\AppData\Local\Microsoft\WindowsApps;;C:\Program Files (x86)\MSBuild\14.0\bin;C:\Program Files (x86)\Microsoft SDKs\Windows\v8.1A\bin\NETFX 4.5.1 Tools\x64
14 verbose lifecycle @~start: CWD: E:\Github\react-vr
15 silly lifecycle @~start: Args: [ '/d /s /c',
15 silly lifecycle 'node node_modules/react-native/local-cli/cli.js start --root .' ]
16 silly lifecycle @~start: Returned: code: 1 signal: null
17 info lifecycle @~start: Failed to exec start script
18 verbose stack Error: @ start: node node_modules/react-native/local-cli/cli.js start --root .
18 verbose stack Exit status 1
18 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:232:16)
18 verbose stack at emitTwo (events.js:87:13)
18 verbose stack at EventEmitter.emit (events.js:172:7)
18 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
18 verbose stack at emitTwo (events.js:87:13)
18 verbose stack at ChildProcess.emit (events.js:172:7)
18 verbose stack at maybeClose (internal/child_process.js:821:16)
18 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
19 verbose pkgid @
20 verbose cwd E:\Github\react-vr
21 error Windows_NT 10.0.14393
22 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
23 error node v5.4.0
24 error npm v3.3.12
25 error code ELIFECYCLE
26 error @ start: node node_modules/react-native/local-cli/cli.js start --root .
26 error Exit status 1
27 error Failed at the @ start script 'node node_modules/react-native/local-cli/cli.js start --root .'.
27 error Make sure you have the latest version of node.js and npm installed.
27 error If you do, this is most likely a problem with the package,
27 error not with npm itself.
27 error Tell the author that this fails on your system:
27 error node node_modules/react-native/local-cli/cli.js start --root .
27 error You can get their info via:
27 error npm owner ls
27 error There is likely additional logging output above.
28 verbose exit [ 1, true ]

Hey I just checked the readme and it points people to:

http://localhost:8081/vr/
Which returns:
Cannot GET /vr/

It should point people to
http://localhost:8081/Samples/

I guess the title says it all :) Since the project is not yet open source and I'm quite passionate about it, is there anything I can do to help? I'd love to submit some PRs once react-vr is open sourced etc.

Description

I took the download zip and followed the guide on GitHub.
I created a project with-dashes-in-the-name and this causes some issues.

GET http://localhost:8081/index.vr.bundle?platform=vr&dev=true 500 (Internal Server Error)
blob:http://localhost:8081/c99b3411-b198-4719-9856-553bedb0999a:18 DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:8081/index.vr.bundle?platform=vr&dev=true' failed to load.
at onmessage (blob:http://localhost:8081/c99b3411-b198-4719-9856-553bedb0999a:15:7)

Expected behavior

I expect to be alerted that my name should not use dashes or allow dashes.

Actual behavior

Project breaks.

Reproduction

react-vr init PROJECT-NAME-WITH-DASHES

Solution

Don't use names with dashes.

Additional Information

I ran the project without dashes in the name and it worked, I was able to view the demo in my HTC Vive, it's truly magic. This is really exciting stuff, to be able to send links to VR spaces/sites and experience them on the HMD is a game changer.

• react-vr package version:
  "version": "0.0.1",

• react-vr-web package version:
  "react-vr": "~0.1.0",
  "react-vr-web": "~0.1.0"

• Operating System: Windows 10

• Graphics Card: NVidia

• Browser: Chrome

• VR Device: Vive

Description
The error occurred after installing React VR from the press release preview and also while trying the create project via the react-vr-cli. I also tried npm run bundle on the default install (Terminal error message below).

errors:

• console:
  http://localhost:8081/vr/client.bundle?platform=vr 500 (Internal Server Error)
• asset url in browser:
  Unknown option: /Users/mickycook/node_modules/react-server/target/server/server.js.RootContainer. Check out http://babeljs.io/docs/usage/options/ for more information about options.\n\nA common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:\n\nInvalid:\n { presets: [{option: value}] }\nValid:\n { presets: [['presetName', {option: value}]] }\n\nFor more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options.
• terminal:
  npm ERR! Darwin 15.5.0
  npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "bundle"
  npm ERR! node v6.4.0
  npm ERR! npm v4.0.5
  npm ERR! code ELIFECYCLE
  npm ERR! [email protected] bundle: node node_modules/react-vr/scripts/bundle.js
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the [email protected] bundle script 'node node_modules/react-vr/scripts/bundle.js'.
  npm ERR! Make sure you have the latest version of node.js and npm installed.
  npm ERR! If you do, this is most likely a problem with the VR package,
  npm ERR! not with npm itself.
  npm ERR! Tell the author that this fails on your system:
  npm ERR! node node_modules/react-vr/scripts/bundle.js
  npm ERR! You can get information on how to open an issue fo

Additional Information

• npm version: 4.0.5
• node version: v6.4.0
• Operating System: [MacOS El Capitan]
• Browser: [Chrome]

https://facebookincubator.github.io/react-vr/docs/getting-started.html

FYI love the template when creating the issue. This is primarily a request to get involved as I'm a LinkedIn/Lynda author and we're planning a course on VR with React in August. Would love to be able to get enough ground work with this and plan the course accordingly.

Description

When attempting to customize the vrControls and nonVRControls of a Project, I struggled to find a way to configure them at initialization.

This originates from a need to support Touch inputs on both the DeviceOrientationControls and the MousePanControls, in order to allow User to refocus the Scene in case of Device Drift when designing for sit-down experiences while also supporting Touch Screen laptops and tablets.

I was able to override the VRInstance's instances of vrControls and nonVRControls with custom ones, but the internal Device fingerprinting to select which Controls to use (i.e. DeviceOrientationControls.isSupported()) is already executed (see Reproduction below).

Expected behavior

The init() function of client.js allows Developers to specify which vrControls and nonVRControls instances to use in the VRInstance() Constructor, with a way of selecting which one to use (see Solution below).

Actual behavior

The VRInstance() Constructor does not support passing custom Controls, and they must be overridden from the vr instance returned.

Reproduction

Simple vr/client.js used to workaround creation of custom Controls:

import { VRInstance } from 'react-vr-web';

import CustomMousePanControls from './CustomMousePanControls';
import CustomDeviceOrientationControls from './CustomDeviceOrientationControls';
import { BROWSER_SUPPORTS_DEVICE_ORIENTATION, IS_MOBILE_DEVICE } from './vr-utilities';


/**
 * Setup the Application's Controls.
 *
 * @param {VRInstance} vr A reference to the VRInstance.
 * @param {?Object} nonVRControls Constructor for Controls to use for non-VR setups.
 * @param {?Object} vrControls Constructor for Controls to use for VR setups.
 */
function setupControls(vr, nonVRControls, vrControls) {
    // Non-VR Controls:
    if (vr.player.controls.nonVRControls && typeof nonVRControls === 'function') {
        if (typeof vr.player.controls.nonVRControls.disconnect === 'function') {
            vr.player.controls.nonVRControls.disconnect();
        }
        // Assume "connect()" is called from the Constructor:
        vr.player.controls.nonVRControls = new nonVRControls(vr.player.camera);
    }

    // VR Controls:
    if (vr.player.controls.vrControls && typeof vrControls === 'function') {
        if (typeof vr.player.controls.vrControls.disconnect === 'function') {
            vr.player.controls.vrControls.disconnect();
        }
        // Assume "connect()" is called from the Constructor:
        vr.player.controls.vrControls = new vrControls(vr.player.camera);
    }
}

function init(bundle, parent, options = {}) {
    // Use "mobile" Controls?
    const useMobileControls = BROWSER_SUPPORTS_DEVICE_ORIENTATION && IS_MOBILE_DEVICE;

    // Only set "cursorVisibility" if it was not defined earlier:
    if (typeof options.cursorVisibility !== 'string') {
        options.cursorVisibility = useMobileControls ? 'visible' : 'hidden';
    }

    const vr = new VRInstance(bundle, 'ReactVRTest', parent, {
        // Add custom options here:
        ...options
    });

    // Select the Controls to use for the Application:
    setupControls(
        vr,
        useMobileControls ? CustomDeviceOrientationControls : CustomMousePanControls,
        null);

    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 };

Solution

The VRInstance() Constructor could support additional (optional) parameters to specific which Controls to use and when:

const vr = new VRInstance(bundle, 'ProjectName', parent, {
    controls: {
        vrControls: CustomVRControls,
        nonVRControls: CustomNonVRControls,
        // Callback to use in order to select which Controls to use:
        useVRControls: () => false // Default value.
    },
    ...options
});

Thanks for your time!

Additional Information

• react-vr package version: 0.1.0
• react-vr-web package version: 0.1.0
• Operating System: All (MacOS, Linux, and Windows)
• Graphics Card: All (NVIDA, ATI, Intel)
• Browser: All (Chrome, Edge, Safari, etc.)
• VR Device: In and Out of VR

Description

I'm developing off the basic WelcomeToVR project and I've added some mesh objects around my simple scene. Everything looks great on desktop but when I try to view in mobile iOS safari or mobile iOS chrome, I get a black screen with the little radar on the right. If I remove the Mesh objects, the scene renders just fine on mobile.

Expected behavior

The scene would render on mobile exactly as on desktop.

Actual behavior

Black screen.

Logs

Not sure how to get mobile logs.

Reproduction

Add a Mesh to the WelcomeToVR project and try to view on mobile iOS Safari or Chrome.

Solution

Additional Information

• react-vr package version: ~0.1.0
• react-vr-web package version: ~0.1.0
• Operating System: iOS 10.2
• Graphics Card: whatever comes standard with iPhone 6S
• Browser: Mobile Safari 10.0 and Chrome Mobile iOS 49.0.2623
• VR Device: N/A

Description

Bug: Right after following install instructions, upon navigating to http://localhost:8081/vr/, nothing is displayed.

Browser log:

caught ReferenceError: ReactVR is not defined
    at (index):11

server log:

Error: Unrecognized platform: vr

Additional Information

• react-vr package version: 0.1.1
• react-vr-web package version: [FILL THIS OUT]
• Operating System: MacOS
• Graphics Card: AMD Radeon R9 M370X 2048 MB
• Browser: Chrome 55
• VR Device: out, browser

Description

Feature request -- From reading the docs, it was unclear to me if it is possible to move the camera throughout the scene or if it is fixed at the origin. I know camera movement is possible in A-frame, if it is not yet supported in ReactVR is there any plan to implement it soon?

Thanks,
Nate

Description

I tried to render Chinese with Text component, but in the canvas, words turned out to be stars

Any suggestion or solution to make it render properly ?

Thanks

Expected behavior

Render Chinese in Text Component

Actual behavior

those words turn out to be stars

Logs

Description

Feature Request

Expected behavior

An Audio component is conspicuously missing. I'm sure there are plans for audio playback and that you know Three.js has spatialization built in... What I would love to see in addition is sound synthesized on the fly. I think dynamically generated sound is crucial to VR interaction.

Solution

Here's an example using a-frame and a web-audio port of the popular signal processing language Pure Data, WebPd: (you might want to lower your volume first) https://meta-meta.github.io/aframe-puredata-component/basic/ WASD to move, mouse to pan

WebPd is of course just 1 possible target. The real solution would be to offer a spatialized Web Audio component that exposes an API for plugging in any Web Audio node.

Additional Information

https://github.com/meta-meta/aframe-puredata-component
https://github.com/sebpiq/WebPd
https://puredata.info/
and here is the a-frame sound component https://github.com/aframevr/aframe/blob/master/src/components/sound.js

Description

Project works but Vive controllers are not visible. Unsure if this is a bug or not.

Expected behavior

I expect to see my Vive controllers after enabling the game controller flags in chrome. (Perhaps this is enabled so that we are able to use the HMD but not the controllers yet.)

Actual behavior

The controllers are visible in the HTC overlay but disappear when returning to the react-vr demo window.

Windows
VR Device:Vive

Hello,

I followed the getting started instructions on your blog post and I get the following error when I run npm start and sudo npm start.

Not sure if it matters, but I'm using Bash for Windows 10 which is running Ubuntu 14.04 LTS.

Thanks for any assistance!

watch /mnt/c/Users/ajayr/Documents/Code/WelcomeToVR EPERM

npm ERR! Linux 3.4.0+
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v6.9.2
npm ERR! npm  v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `node node_modules/react-native/local-cli/cli.js start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'node node_modules/react-native/local-cli/cli.js start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the WelcomeToVR package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node node_modules/react-native/local-cli/cli.js start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs WelcomeToVR
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls WelcomeToVR
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /mnt/c/Users/ajayr/Documents/Code/WelcomeToVR/npm-debug.log

Hi, I'm trying to implement 2D video in a project, right now i'm able to create the video texture & mesh right in the client.js and adding the scene right there, but I think it lacks flexibility. The thing is, and correct me if i'm wrong, since we don't have any access to the scene nor the camera right from the NativeModule it's currently not possible to create geometry on the fly anywhere but the client.js. Is there any approach while we wait for the VideoModule? Thanks in advance!

Is there any way currently, to position a component in the center of screen (always)?
I want to render a gaze cursor.

I see the .html files in the gh-pages branch, but not any source files (e.g., .md files) in master.

1. Load https://facebookincubator.github.io/react-vr/docs/dev-tools.html
2. Scroll to the bottom and find You can edit the content above on GitHub and send us a pull request!
3. Click the edit the content above on GitHub link
4. Notice, it 404s because the original Markdown files are not in master

Running npm start after the npm install in a MacOSX Sierra. Returns an error:

MBP-de-Enrique:reactvr-preview encodi$ npm start

@ prestart /Users/encodi/Development/ReactVR-preview
node -e "try{require('fs').statSync('node_modules')}catch(e){process.exit(1)}" || npm install

@ start /Users/encodi/Development/ReactVR-preview
node node_modules/react-native/local-cli/cli.js start --root .

(node:28392) DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
(node:28392) DeprecationWarning: Using Buffer without new will soon stop working. Use new Buffer(), or preferably Buffer.from(), Buffer.allocUnsafe() or Buffer.alloc() instead.
Scanning 632 folders for symlinks in /Users/encodi/Development/ReactVR-preview/node_modules (9ms)
┌────────────────────────────────────────────────────────────────────────────┐
│ Running packager on port 8081. │
│ │
│ Keep this packager running while developing on any JS projects. Feel │
│ free to close this tab and run your own packager instance if you │
│ prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/Users/encodi/Development/ReactVR-preview
/Users/encodi/Development/ReactVR-preview

[Hot Module Replacement] Server listening on /hot

React packager ready.

2016-12-16 10:59 node[28392] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-12-16 10:59 node[28392] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-12-16 10:59 node[28392] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-12-16 10:59 node[28392] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-12-16 10:59 node[28392] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-12-16 10:59 node[28392] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-12-16 10:59 node[28392] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-12-16 10:59 node[28392] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-12-16 10:59 node[28392] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-12-16 10:59 node[28392] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-12-16 10:59 node[28392] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-12-16 10:59 node[28392] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2016-12-16 10:59 node[28392] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
ERROR Error watching file for changes: EMFILE
{"code":"EMFILE","errno":"EMFILE","syscall":"Error watching file for changes:","filename":null}
Error: Error watching file for changes: EMFILE
at exports._errnoException (util.js:1022:11)
at FSEvent.FSWatcher._handle.onchange (fs.js:1282:11)

See http://facebook.github.io/react-native/docs/troubleshooting.html
for common problems and solutions.

npm ERR! Darwin 16.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v7.2.0
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! @ start: node node_modules/react-native/local-cli/cli.js start --root .
npm ERR! Exit status 11
npm ERR!
npm ERR! Failed at the @ start script 'node node_modules/react-native/local-cli/cli.js start --root .'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node node_modules/react-native/local-cli/cli.js start --root .
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/encodi/Development/ReactVR-preview/npm-debug.log
MBP-de-Enrique:reactvr-preview encodi$

There's actually no React Native support afaik, how could I integrate with a native app?

Description

The Next & Prev links are reversed in the docs. I keep pointing to the lower right to go to next.

Expected behavior

Prev link is in the lower left and Next link is in the lower right.

Actual behavior

This is reversed.

Solution

Copy changes from facebook/react-native#10753

Additional Information

• react-vr package version: 0.1.1
• react-vr-web package version: 0.1.1

Description

Unable to view initial "hello" scene after following the instructions to create "Your First Application."

Expected behavior

Should see "hello" text and the "chess world."

Actual behavior

Page is blank (black background) and only the overlay widgets (compass, "view in VR" button, and fullscreen button) are visible.

Reproduction

Simply follow the instructions to setup "Your First Application" found in the developer site.

Additional Information

• react-vr package version: 0.1.1
• react-vr-web package version: 0.1.1
• Operating System: Mac OSX 10.11.6
• Graphics Card: NVIDIA GeForce GT 750M 2048 MB
• Browser: Chrome (v54.0.2840.98), Firefox (v50.0.2), and Safari (v9.1.2).
• VR Device: N/A

This is great. It's good to see the focus on the browser. A couple of questions:

• Would it be useful to split out the THREE.js React bindings to a separate repo as they may be useful in their own right outside of the VR context? (as in equivalent to react-three and react-three-renderer)
• Although the browser support is great to see, would it be more efficient and less brittle to bypass the THREE/WebGL/Browser layers and use react-native 3D primitives directly on OpenGL ES?

I added at my index.html

but i can not see Korean character set.

how can i use UTF-8?

Description

While lit is used in the Mesh example I couldn't find any documentation. I'm happy to create PR in case, but first need to understand it's purpose.

see https://facebookincubator.github.io/react-vr/docs/mesh.html#source

Is support for Shapes and Mesh primitives like Boxes, Spheres etc. planned and coming soon?
I totally expected these to exist even in the prerelease, so was a bit disappointed.

This seems very similar from a-frame which is also declarative wrapper on top of three.js. What are the benefits of this package and are the benefits significant enough that they couldn't be just be contributed to a-frame? There is an ecosystem of packages on top of a-frame that would need to be ported.

Description

While there is a WebVR Slack (webvr.slack.com) I think it would be a good idea to form a community around react-vr to help it grow ! Request an invitation here (I'm still figuring out how to enable invitation requests) and join me at Unofficial ReactVR !

Description

Using Scene in Chrome throws an error. My code:

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  Scene,
} from 'react-vr';
import Tree from './components/Tree';

class World extends Component {
  render() {
    return (
      <View>
        <Scene />
      </View>
    );
  }
};

AppRegistry.registerComponent('hello_world', () => World);

Expected behavior

Scene should place the camera.

Actual behavior

An error is thrown

Logs

Scene.js:26 Uncaught ReferenceError: OVRUI is not defined
    at new RCTScene (Scene.js:26)
    at Array.Scene (UIManager.js:149)
    at UIManager.createView (UIManager.js:205)
    at ReactNativeContext.frame (ReactNativeContext.js:377)
    at Object.frame (createRootView.js:167)
    at VRInstance._frame (VRInstance.js:107)

Reproduction

Same as above

Additional Information

  "dependencies": {
    "ovrui": "~0.1.0",
    "ovr-audio": "~0.1.0",
    "react": "15.3.2",
    "react-native": "0.37.0",
    "three": "^0.80.1",
    "react-vr": "~0.1.0",
    "react-vr-web": "~0.1.0"
  }

Description

Feature: Ability to use Google Cardboard + iPhone as VR headset with react-vr.

Expected behavior

Given I am not yet wearing any set
And I intend on using Google Cardboard
When I tap on the "View in VR" button
I should see the screen switch to stereoscopic rendering
And I should also be shown the dismissible SupportMessage

Actual behavior

I am shown the SupportMessage and stuck in Augmented Reality on my phone browser.

Reproduction

Open the sample project on an iPhone in Safari and click the "View in VR" button.

Solution

Using Three.StereoEffect as a fallback VR effect in Player.js and allowing for users to toggle between AR and simple stereoscopic VR effect.

The AR accelerometer tracking already works great, so by simply adding the stereoscopic effect a user could throw their phone in cardboard and feel immersed.

I've used the following before succesfully:

effect = new THREE.StereoEffect(renderer); 
effect.render(scene, camera);

It even has its own npm module right now

Additional Information

• react-vr package version: most recent 0.1.1
• react-vr-web package version: 0.1.1
• Operating System: Mac OSX El Capitan for Dev / iOS10 for Phone
• Graphics Card: iPhone 7 A9 chip i think?
• Browser: Latest Chrome and Safari for iOS10
• VR Device: Google Cardboard + iPhone

Description

The HMR function appears to send the updated module to the browser successfully, but the scene isn't updated to reflect the new code. The React Native packager successfully notices the change I make to the code, I can see the HMR received in the browser's console, but the scene continues to follow the logic of the initial page load.

This is far and away the most exciting feature of React VR :) Not sure if I'm missing a step.

Expected behavior

Scene renders using updated code.

Actual behavior

Scene continues to render using old code.

Reproduction

Go into CubeSample/vr/client.js and instantiate the VRInstance with hot reloading enabled:

const vr = new VRInstance(bundle, 'CubeSample', parent, {
    cursorEnabled: true,
    nativeModules: [ cubeModule ],
    scene: scene,
    enableHotReload:true
});

Just for good measure, at this point I have tried also doing a fresh npm start and loading the page fresh: 'http://localhost:8081/Samples/CubeSample/vr/'

Then, make a change to CubeSample/index.vr.js (eg. change the font size of the text element) and save the file. Expected behaviour should occur and sadly does not.

Additional Information

• React VR version: react-vr-web
• Operating System: MacOS
• Graphics Card: AMD
• Browser: Chrome 55
• VR Device: Out of VR

Description

Feature Request

I'd like to be able to create 2D interfaces in React VR using react web / react dom components.