javascriptthree.jsreact-360

React-VR set camera position when replacing Pano


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


Solution

  • 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 .