Porting the Tour Sample from React VR to React 360

KingTomaHawk commented 6 years ago

Description

Need help "porting" Tour Sample from React VR to React 360.

Expected behavior

Functional Sample

Actual behavior

I can only see a small area of my 360 Picture: demo

Reproduction

import all packages from react-360 instead of react vr in all project files
remove background-color option from Panos ( because it's not supported anymore)
uncommented all sound features (because of some errors)

changed client.js to:


function init(bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    fullScreen: true,
    ...options,
  });

    r360.renderToSurface(
      r360.createRoot("TourSample", { /* initial props */ }),
      r360.getDefaultSurface()
   );

}

window.React360 = {init};

Changed index.html to:

<html>
  <head>
    <title>ReactVR: Tour Sample</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>
      React360.init(
        '../index.bundle?platform=vr&dev=true',
        document.body
      );
    </script>
  </body>
</html>

Solution

/

Additional Information

'react-360' package version: 1.0.0
'react-360-web' package version: 1.0.2
Operating System: Windows
Browser: Chrome, Firefox
VR Device: Just black screen on Oculus Go

Edit: My first (real) bugreport on Github so forgive me any mistakes :)

karmaggyatso commented 6 years ago

@KingTomaHawk were you able to resolve the problem?

KingTomaHawk commented 6 years ago

@karmaggyatso sadly no.

karmaggyatso commented 6 years ago

Hey @andrewimm, could you help us to resolve the above problem, please. Thank you.

moroneyk commented 6 years ago

Hi,

You might want to try rendering to a location instead of to a surface in your client.js file:

  r360.renderToLocation(
    r360.createRoot('TourSample', 
      { 
         /* initial props */
      }
    ),
    r360.getDefaultLocation()
  );

  r360.compositor.setBackground(LOADING_BACKGROUND_URL,
    {format: '3DTB'}
  );

The partial image you are seeing is due to the use of . Check also that you are setting background panorama using the Environment module something like the code below, I created a Background class to manage all this in my projects and removed the use of Panos from my projects completely:

    Environment.clearBackground();
    Environment.setBackgroundImage(
      asset(this.state.data.photos[this.state.nextLocationId].uri),
      {format: '3DTB'} /* one of the formats mentioned above */
    );

I think the string values used for the formats of 3D images and video (3DTB etc) have changed between ReactVR and React360, so make sure you have updated these as necessary.

Let me know if this helps, Kevin

KingTomaHawk commented 6 years ago

Hi Kevin,

sry I was on vacation. Changing from Surface to Location fixed the issue, but It was lagging. Removing the Sound Module from import, fixed that problem.

Thanks

facebookarchive / react-360