How to Create a Multiple 360 Panorama Photos in react-vr?

ghost commented 7 years ago

We use GitHub Issues for bugs and feature requests

--- Delete everything above this line before submitting your issue ---

Description

Is this a Bug or a Feature Request? For a Bug please explain below what you did, what you expected to happen, and what actually happens.

Expected behavior

Actual behavior

Reproduction

List all the steps required to encounter the issue you're reporting. These steps should be clear and concise.

An example of your code that reliably reproduces the issue is ideal.

Solution

What needs to be done to address this issue? Ideally, provide a pull request with a fix.

Additional Information

'react-vr' package version: [FILL THIS OUT: get this by running npm list react-vr]
'react-vr-web' package version: [FILL THIS OUT: get this by running npm list react-vr-web]
Operating System: [FILL THIS OUT: MacOS, Linux, or Windows?]
Graphics Card: [FILL THIS OUT: NVIDA, ATI, Intel? Which Driver?]
Browser: [FILL THIS OUT: Oculus Browser, Chrome, Edge, Safari? Which version?]
VR Device: [FILL THIS OUT: In or Out of VR? Headset? ]

amberroy commented 7 years ago

Thanks for your question. Please tell us more about the use case you're trying to support.

ghost commented 7 years ago

Hello amberroy I am trying to create VR tour using react-vr I do no that how to add multiple images

mikearmstrong001 commented 7 years ago

You will want to set the pano source based on some state. Here is an example which changes the pano based on a button press

The key line is

<Pano source={this.state.source} />

/**
 * Copyright (c) 2016-present Oculus. All Rights Reserved.
 *
 *
 */
'use strict';

...

// Test both standard and cubemap pano.
class TestPano extends React.Component {
  constructor(props) {
    super(props);
    this.state = {source: {uri:'assets/chess-world_orient.jpg'}};
  }

  render() {
    return (
      <View
        style={{
          transform:[{translate: [0, 0, -3]}],
          layoutOrigin: [0.5, 0.5, 0], position:'absolute', alignItems: 'center',
        }}>
        <Pano source={this.state.source} />
        <VrButton
          style={{width:1, height:0.25, backgroundColor:'red'}}
          onClick={()=>this.setState({source: {uri:'assets/chess-world_orient.jpg'}})}
        >
          <Text style={{flex:1, fontSize:0.1, textAlign:'center', textAlignVertical:'center'}}>Equirect</Text>
        </VrButton>
         <VrButton
          style={{width:1, height:0.25, backgroundColor:'green'}}
          onClick={()=>this.setState({source: {uri:'assets/cube-world.jpg', stereo: 'TOP_BOTTOM_3D'}})}
        >
          <Text style={{flex:1, fontSize:0.1, textAlign:'center', textAlignVertical:'center'}}>Stereo Equirect</Text>
        </VrButton>
      </View>
    );
  }
};

AppRegistry.registerComponent('test_pano', () => TestPano);

ghost commented 7 years ago

Hello

Thanks for sharing this code

Please look at the following example link : http://openspace.3dphy.com/?un=sa&ic=AshianaTheCenterCourtSF&md=t&map=t I want to make same as like this it is possible in react vr? lemme know how do this with floor plan and some icons with text

Thanks in advance

On Mon, Jul 10, 2017 at 9:39 PM, Mike Armstrong notifications@github.com wrote:

You will want to set the pano source based on some state. Here is an example which changes the pano based on a button press

The key line is

/**

Copyright (c) 2016-present Oculus. All Rights Reserved.

*/ 'use strict';

...

// Test both standard and cubemap pano. class TestPano extends React.Component { constructor(props) { super(props); this.state = {source: {uri:'assets/chess-world_orient.jpg'}}; }

render() { return ( <View style={{ transform:[{translate: [0, 0, -3]}], layoutOrigin: [0.5, 0.5, 0], position:'absolute', alignItems: 'center', }}>

<VrButton style={{width:1, height:0.25, backgroundColor:'red'}} onClick={()=>this.setState({source: {uri:'assets/chess-world_orient.jpg'}})} > <Text style={{flex:1, fontSize:0.1, textAlign:'center', textAlignVertical:'center'}}>Equirect</Text> </VrButton> <VrButton style={{width:1, height:0.25, backgroundColor:'green'}} onClick={()=>this.setState({source: {uri:'assets/cube-world.jpg', stereo: 'TOP_BOTTOM_3D'}})} > <Text style={{flex:1, fontSize:0.1, textAlign:'center', textAlignVertical:'center'}}>Stereo Equirect</Text> </VrButton> </View> );

} };

AppRegistry.registerComponent('test_pano', () => TestPano);

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/facebook/react-vr/issues/271#issuecomment-314154438, or mute the thread https://github.com/notifications/unsubscribe-auth/AXGI-ZUPEJoDTcQkEUuX9iKpFdw7sxJVks5sMkzMgaJpZM4OSrMb .

amberroy commented 7 years ago

Yes it is possible! Have a look at our newest sample which is a virtual tour using linked 360 photos, similar to your example link. `https://github.com/facebook/react-vr/tree/master/Examples/TourSample

ghost commented 7 years ago

Hello Amber Roy

Thanks for your response I am trying to build an real estate website i,e real estate tour using react vr with floor plan and some animations I do no that how to it responsible for all browsers? and mobile support

On Wed, Jul 12, 2017 at 3:27 AM, Amber Roy notifications@github.com wrote:

Yes it is possible! Have a look at our newest sample which is a virtual tour using linked 360 photos, similar to your example link. `https://github.com/facebook/react-vr/tree/master/Examples/TourSample

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/facebook/react-vr/issues/271#issuecomment-314584133, or mute the thread https://github.com/notifications/unsubscribe-auth/AXGI-RJh5eVQo8G7B0VpqpDhNgTIN0Khks5sM-_IgaJpZM4OSrMb .

ctoLarsson commented 7 years ago

The tour example crashes on iPhone, same as I reported in #268 after about 15 navigation clicks around the area, both in dev and production mode. https://github.com/facebook/react-vr/issues/268 I ran the example with the released 1.4.0, not by building react-vr for clarity.

screenshot

yosun commented 7 years ago

yeah please fix this crap on iOS

ctoLarsson commented 7 years ago

Yosun, Kumaresh, happy to let you know that you can do all those use cases in the tour framework (built with React VR) and also add own React VR components easily. https://github.com/livetourlab/live-tour-lab

The earlier iOS issue in React VR 1.4.0 is solved in the React VR master branch, I verified it working. Happy to help if you need assistance to compile it.

If you like the framework, please star it and contribute! Cheers and enjoy!

ghost commented 7 years ago

can u please share some examples code with floor plan

https://livetour.istaging.com/57ecd104816dfa005668e914 like this

Thanks

On Wed, Aug 23, 2017 at 5:24 PM, Anders notifications@github.com wrote:

Yosun, Kumaresh, happy to let you know that you can do all those use cases in the tour framework (built with React VR) and also add own React VR components easily. https://github.com/livetourlab/live-tour-lab

The earlier iOS issue in React VR 1.4.0 is solved in the React VR master branch, I verified it working. Happy to help if you need assistance to compile it.

If you like the framework, please star it and contribute! Cheers and enjoy!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/facebook/react-vr/issues/271#issuecomment-324305947, or mute the thread https://github.com/notifications/unsubscribe-auth/AXGI-R443f2i4XSDkeIkD9LQZ_fFzNtEks5sbBMDgaJpZM4OSrMb .

facebookarchive / react-360