react-vrアプリケーションでスコアまたはヘルスバーが常に表示されるようにします。react-VRの画面でいくつかの要素を固定したままにするには
私はVrHeadModel-rotation、yawPitchRollとpositionを使うことができましたが、固定しておくために計算する必要がありました。私は何かが見当たりません。
どうすればよいですか?それはHMに加入していてあまり遅れてい
react-vrアプリケーションでスコアまたはヘルスバーが常に表示されるようにします。react-VRの画面でいくつかの要素を固定したままにするには
私はVrHeadModel-rotation、yawPitchRollとpositionを使うことができましたが、固定しておくために計算する必要がありました。私は何かが見当たりません。
どうすればよいですか?それはHMに加入していてあまり遅れてい
更新要旨は:
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
おかげで、 - そして私は、画面上に表示されているスコアが –
のときに調整しようとすると、回転Xが高くても低くても動作しますが、背後を見るとスコアが画面全体に移動します。 –
それがうまくいってうれしい。 – cidicles