更换 Pano 时 React-VR 设置相机位置答案

【问题标题】：React-VR set camera position when replacing Pano更换 Pano 时 React-VR 设置相机位置
【发布时间】：2017-11-05 19:08:43
【问题描述】：

我是 react-vr 的新手，想制作一个旅游应用。在那里我更新了Pano 图片。当我设置一张新图片时，相机/场景与加载新图片之前的位置相同。

下面是部分代码：

 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>

);}

现在我想设置相机位置或变换图片，以便从图片上的某个位置开始。

我发现无法在 react-vr 中获取实际相机位置或设置相机位置。

最好的方法是什么？
感谢您的帮助

【问题讨论】：

听起来您只是想旋转全景图，以便在加载时看到某个方向。如果是这样，您可以使用全景的样式属性设置旋转。
我尝试旋转全景，但我需要知道相机的实际旋转。因为如果用户旋转了 180°，我更换 pano，相机的旋转仍然是 180°。所以我必须以某种方式获得相机的旋转并将全景的旋转设置为我认为的这个值。但我不知道如何获得轮换。
知道了 - 您正在寻找 VRHeadModel：facebook.github.io/react-vr/docs/vrheadmodel.html
哦，是的，谢谢，这就是我正在寻找的 API :)

标签： javascript three.js react-360

【解决方案1】：

我找到了解决方案，如果其他人有类似的问题，我想在这里发布。

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")}
   />
 );
}

然后从 react-vr 导入 VrHeadModel。
因此，如果全景发生变化，新图片将旋转到相机的实际位置。每次加载新照片时，相机都设置在全景的同一部分。

【讨论】：