react-360 - 如何在react-VR中将某些元素固定在屏幕上

Question

我想在react-vr应用程序中保持分数或健康栏始终可见。

我可以使用 VrHeadModel - 旋转、yawPitchRoll 和位置，但必须计算它才能保持其固定......似乎我错过了一些东西。

我该怎么做？

Answer 1

更新的要点，由于订阅了 HM，延迟更小:

https://gist.github.com/cidicles/b4e978d3f3e2de8b359bdc51b5fb3261

<小时/>

这就是我目前正在做的事情。它具有视觉滞后并在循环中设置状态，但实现了目标。

为 VrheadModel.rotation() 数组创建状态

constructor(props) {
  super(props);
  this.state = {
    hmRot: VrHeadModel.rotation()
  }
}

启动计时器

componentDidMount(){
  this.timer = setInterval(()=>{this.tick()}, 50);
}
componentWillUnmount(){
  clearInterval(this.timer);
}
tick(){
  this.setState({
    hmRot: VrHeadModel.rotation()
  });
}

在 0/0/0 处创建一个 View ，并将固定对象放置在场景中，就像您通常的世界一样。设置主视图上的旋转以匹配相机的旋转。

  render(){
    let {hmRot} = this.state;
    return (
      <View
        style={{
          position: 'absolute',
          layoutOrigin: [0.5, 0.5],
          transform: [
            {translate: [0, 0, 0]},
            {rotateX: hmRot[0]},
            {rotateY: hmRot[1]},
            {rotateZ: hmRot[2]}
          ]
        }}>
        <Text
          style={{
            position: 'absolute',
            layoutOrigin: [0.5, 0.5],
            backgroundColor: '#f00',
            transform: [
              {translate: [0, 0, -2]},
            ]
          }}>
          Fixed
        </Text>
      </View>
    );
  }

React VR 团队有一篇关于此问题的相关帖子: https://github.com/facebook/react-vr/issues/261