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