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

render pano image by layers #833

Open
@Deboracgs

Description

@Deboracgs

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions