React-VR set camera position when replacing Pano

Question

I'm new with react-vr and want to make a tour app. There I update the Pano pictures. When I set a new picture the camera/scene is at the same position as before loading the new picture.

Here is a part of the code:

 render() {
if (!this.state.data) {
  return null;
}

const locationId = this.state.locationId;
const isLoading = this.state.nextLocationId !== this.state.locationId;

return (

    <View>
      <Pano
        style={{
          position: 'absolute'
           }}
        onLoad={() => {
          this.setState({
          locationId: this.state.nextLocationId
          });
        }}
        source={asset(this.state.data.photos360[this.state.nextLocationId].uri)}
      />

      {tooltips && tooltips.map((tooltip, index) => {
        return(
          <NavButton
            key={index}
            isLoading={isLoading}
            onInput={() => {
                    this.setState({
                        nextLocationId: tooltip.linkedPhoto360Id});
            }}
            source={asset(this.state.data.nav_icon)}
            textLabel={tooltip.text}
            rotateY={(tooltip.rotationY && tooltip.rotationY) || 0}
            rotateX={(tooltip.rotationX && tooltip.rotationX) || 0}
            translateZ={(tooltip.translateZ && tooltip.translateZ) || this.translateZ}
          />
        );
      })}
    </View>

);}

Now I want to set the camera position or transform the picture so that I start at a certain position on the picture.

I have found no possibility to get the actual camera position in react-vr or to set the camera position.

What would be the best way to do this?
Thanks for help

It sounds like you just want to rotate your pano, so that it is looking a certain direction when it loads. If that's what's up you can set rotation with the style attribute of the pano. — cidicles, Nov 07 '17 at 01:02
I have tried to rotate the pano but then I need to know the actual rotation of the camera. Because if the user rotated by 180° and I replace the pano, the rotation of the camera is still at 180°. So I somehow have to get the rotaion of the camera and set the rotation of the pano to this value I think. But I have no idea how to get the rotation. — luki, Nov 07 '17 at 20:54
Gotcha - You are looking for VRHeadModel: https://facebook.github.io/react-vr/docs/vrheadmodel.html — cidicles, Nov 07 '17 at 22:19

score 0 · Accepted Answer · answered Nov 29 '17 at 15:36

I found the solution and want to post it here if other people have a similar problem.

render() {
//if the pano source changes it renders 
//it gets the position in x and y axis in ° via the VrHeadModel
const rotationY=VrHeadModel.yawPitchRoll()[1]+offestY;
const rotationX=VrHeadModel.yawPitchRoll()[0]+offsetX;

return (
  <Pano
        style={{
          position: 'absolute',
            transform:[
             {rotateY: rotationY},
             {rotateX: rotationX},
             ]
        }}
        source={asset("photo.png")}
   />
 );
}

And import the VrHeadModel from react-vr.
So if the the pano changes the new picture is rotated to the actual position of the camera. The camera is set to the same part of the pano when loading a new picture every time .

React-VR set camera position when replacing Pano

1 Answers1