使用reactVR的多个HotSpot

Question

我正在尝试使用360在reactVR全景图像中创建多个热点。我的计划是在不同的地方放置不同的信息按钮。单击后，它将在文本框中显示一个框和gif图像，以便查看者可以查看动画图像。我以为我是JAVAScript和reactVR的新手，这将是一个有趣的项目，但是很不幸。如果有人可以帮助我解决我的问题，我将非常感谢。

这里是我的code供参考：

import React from 'react';
import {
  AppRegistry,
  asset,
  Pano,
  Text,
  View,
  VrButton,
  Animated
} from 'react-vr';

class web360Peek extends React.Component {
  constructor() {
    super();
    this.state = {selectedState: "office"};
  }

  stateClicked (selection) {
    let newState;
    switch(selection) {
      case 1:
        newState = "office";
        break;
      case 2:
        newState = "drawing";
        break;
      case 3:
        newState = "garden";
        break;
      case 4:
        newState = "building";
        break;
    }
    console.log(newState);
    this.setState({ selectedState: newState});
  }

    moveForward() {
    Animated.spring(this.state.zValue, {
      toValue: -1
    }).start();
  }

  moveBack() {
    Animated.spring(this.state.zValue, {
      toValue: -2
    }).start()
  }

  render() {
    const states = {
      office: "office",
      drawing: "drawing",
      garden: "garden",
      building: "building",
   }

    return (
      <View>
        <Pano source={asset(this.state.selectedState + '.jpg')}/>
        <View
          style={{
            width: 3,
            flexDirection: 'column',
            alignItems: 'stretch',
            layoutOrigin: [0.5, 0.5],
            transform: [{translate: [0, 0, -5]}]
          }}
        >
          <Title/>
        </View>
        <View>
          <Animated.Image
            source = {asset('infoButton.png')}
            style = {{
              width: 0.2,
              height: 0.2,
              layoutOrigin: [0.5, 0.5],
              transform: [{translate: [0, 0, -2]}]
              }}
            onEnter={() => this.moveForward()}
            onExit = {() => this.moveBack()}>

              <VrButton onClick={() => this.stateClicked(1)}>
              </VrButton>
          </Animated.Image>
        </View>

      </View>
    );
  }
};
   class Title extends React.Component {
  constructor() {
    super();
    this.state = {title: "Welcome"};
  }
  render() {
    return (
      <View>
        <Text style={{fontSize: 0.5, textAlign: 'center', color: "#000"}}>
        {this.state.title}
        </Text>
      </View>
    )
  }
}

AppRegistry.registerComponent('web360Peek', () => web360Peek);

谢谢。