如何在反应-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创建视图和在场景作为定位你的固定对象你通常是世界。在主视图上设置旋转以匹配相机的旋转。

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

周围有从阵营VR队这边这个问题相关的职位： https://github.com/facebook/react-vr/issues/261