React-VR установил положение камеры при замене Pano

Я новичок в 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 или установить положение камеры.

Как лучше всего это сделать?
Спасибо за помощь.


javascript three.js react-360
person luki    schedule 05.11.2017    source источник
comment
Похоже, вы просто хотите повернуть панораму, чтобы при загрузке она смотрела в определенном направлении. Если это так, вы можете установить вращение с атрибутом стиля панорамы.   -  person cidicles    schedule 07.11.2017
comment
Я попытался повернуть панораму, но тогда мне нужно знать фактическое вращение камеры. Потому что, если пользователь повернулся на 180° и я заменю панораму, поворот камеры все равно будет на 180°. Так что я каким-то образом должен получить вращение камеры и установить вращение панорамы на это значение, я думаю. Но я понятия не имею, как получить вращение.   -  person luki    schedule 07.11.2017
comment
Попался: вы ищете VRHeadModel: facebook.github.io/react-vr/ документы/vrheadmodel.html   -  person cidicles    schedule 08.11.2017
comment
О да, спасибо, это API, который я искал :)   -  person luki    schedule 08.11.2017

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел решение и хочу опубликовать его здесь, если у других людей есть аналогичная проблема.

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

И импортируйте VrHeadModel из react-vr.
Так что, если панорама изменится, новое изображение будет повернуто в фактическое положение камеры. Камера устанавливается на одну и ту же часть панорамы при загрузке нового изображения каждый раз.

person luki    schedule 29.11.2017