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
Description
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
Labels
No labels