2017-08-24 7 views
2

react-vrアプリケーションでスコアまたはヘルスバーが常に表示されるようにします。react-VRの画面でいくつかの要素を固定したままにするには

私はVrHeadModel-rotation、yawPitchRollとpositionを使うことができましたが、固定しておくために計算する必要がありました。私は何かが見当たりません。

どうすればよいですか?それはHMに加入していてあまり遅れてい

答えて

1

更新要旨は:

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


これは、私は現在、これをやっている方法です。視覚的な遅れがあり、ループで状態を設定しますが、目標を達成します。

0/0/0でビューを作成します

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

スタートにVrheadModel.rotation()配列のためのタイマー

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

を状態を作成し、シーンなどで、あなたの固定されたオブジェクトを配置あなたは通常世界です。マスタービューの回転をカメラの回転に合わせて設定します。

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

+0

おかげで、 - そして私は、画面上に表示されているスコアが –

+0

のときに調整しようとすると、回転Xが高くても低くても動作しますが、背後を見るとスコアが画面全体に移動します。 –

+0

それがうまくいってうれしい。 – cidicles

関連する問題