Skip to content
This repository has been archived by the owner on Dec 15, 2020. It is now read-only.

render pano image by layers #833

Open
Deboracgs opened this issue Sep 8, 2020 · 0 comments
Open

render pano image by layers #833

Deboracgs opened this issue Sep 8, 2020 · 0 comments

Comments

@Deboracgs
Copy link

Hello guys, I have a doubt, because I'm trying create an interactive virtual tour. So, I have 3 images, the environment, the floor and the wall, these images all are png images. I want to render environment and choose which wall or floor i want to render.

I trying render just a image now, but doesn't appears on screen.

so, anyone can help me?

// This file contains the boilerplate to execute your React app.
// If you want to modify your application's content, start in "index.js"

import {ReactInstance} from 'react-360-web';

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

  // Render your app content to the default cylinder surface
  r360.renderToSurface(
    r360.createRoot('proj16_pano', { /* initial props */ }),
    r360.getDefaultSurface()
  );

  // Load the initial environment
  r360.compositor.setBackground(r360.getAssetURL('enviroment.png'));
}

window.React360 = {init};
import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  asset
} from 'react-360';

export default class proj16_pano extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, width: 2048, height: 1024}}>
        {/* <View style={styles.greetingBox}>
          <Text style={styles.greeting}>
            Welcome to React 360
          </Text> */}
          <Image source={asset('floor-02-r.png')} style={{ flex: 1, width: 2048, height: 1024}} />
        {/* </View> */}
      </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('proj16_pano', () => proj16_pano);

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant