React-360: Environment.setBackground() causes error.

[zzc-tongji]

I notice that you have updated react-vr to react-360.

When using the new react-360, I meet some problems of changing background of panoramic image.

// index.js

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  VrButton,
  Environment,
} from 'react-360';

export default class Hello360 extends React.Component {
  render() {
    return (
      <View style={styles.panel}>
        <VrButton
          onClick={() => {
            Environment.setBackground(
              'http://s3.amazonaws.com/medias.photodeck.com/b180ee9b-8773-4671-a92e-3f4270d2df69/1204-1-1689_1600_large.jpg',
              {format: '2D'}
            );
          }}
        >
          <View style={styles.greetingBox}>
            <Text style={styles.greeting}>
              React 360: Change Background
            </Text>
          </View>
        </VrButton>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  panel: {
    // Fill the entire surface
    width: 1000,
    height: 600,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  greetingBox: {
    padding: 20,
    backgroundColor: '#000000',
    borderColor: '#639dda',
    borderWidth: 2,
  },
  greeting: {
    fontSize: 30,
  },
});

AppRegistry.registerComponent('Hello360', () => Hello360);

When I click the button, an error occur on the console of Chrome.

_react4.Environment.setBackground is not a function

Is it a bug?

[zzc-tongji]

I try to replace

Environment.setBackground(
  'http://s3.amazonaws.com/medias.photodeck.com/b180ee9b-8773-4671-a92e-3f4270d2df69/1204-1-1689_1600_large.jpg',
  {format: '2D'}
);

by

Environment.setBackground(
  asset('chess-world.jpg'),
  {format: '2D'}
);

and add file chess-world.jpg to ./static_assets/.

It still returns the same error.

[ryanf12]

I would be interested in this as well.

Any ideas how to get it to change background image without the "fade to black"?

[zzc-tongji]

Replace

Environment.setBackground(
  asset('chess-world.jpg'),
  {format: '2D'}
);

by

Environment.setBackgroundImage(
  asset('chess-world.jpg'),
  {format: '2D'}
);

is one solution. By doing this, background image could be successfully changed.

---

However, there is still difference between setBackground() and setBackgroundImage().

setBackground

// Compositor.js
setBackground(src: string, options: PanoOptions = {}): Promise<void>

// Environment.js
export type PanoOptions = {
  format?: VideoStereoFormat,
  transition?: number,
};

setBackgroundImage

https://facebook.github.io/react-360/docs/environment.html#setbackgroundimageurl-uri-string-options-object

Note that option in setBackground contains transition, but that option in setBackImage doesn't.

[andrewimm]

Right, setBackground is not a method. The Environment module in React is documented in the link you shared above.

On the client.js side, you can change the transition time. To eliminate a fade entirely, set the transition to 0. This is not yet supported on the React side because the Environment Native Module shares a common API across all of our platforms (React 360 externally, React VR internally at Oculus). This allows us to easily share our application code across web and mobile at Oculus, but we cannot easily modify one platform without modifying the others. I will explore whether it is possible to move the transition into the native module as an option, as well.

[SofiaSousa]

I was following the docs and I though I had a similar problem (and that's why I came here). Then I realized that I had forgotten to import { asset } from 'react-360'. This could be explicit in docs.

Hope it could help someone!

[jamesryan-dev]

This issue was closed however setBackground remains in the docs
https://facebook.github.io/react-360/docs/photos-and-videos.html
Lil fyi.. aware I could be wrong..