I'm new to react-vr and I am working on developing a tour app. My issue is that when I update the Pano pictures, the camera/scene remains in the same position as before loading the new picture.
Below is a snippet 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>
);}
My challenge now is how to set the camera position or transform the picture so that it starts at a specific point on the image.
I have not been able to find a way to retrieve the current camera position or set the camera position in react-vr.
Any suggestions on the best approach to tackle this?
Thank you for your assistance