はじめてのReact VR

Reactのコンポーネントの中にthree.jsのsceneを配置したら面白いんじゃないか…
というようなことを考えていたらReact VRとやらが登場していたので少し触ってみた。

DEMO nishaya/my-first-react-vr

componentの切り出しは、通常のReactと同様

export default class MyText extends React.Component {
  render() {
    return (
      <Text>
        {this.props.children}
      </Text>
    )
  }
}

と定義したものを、importして使う

import MyText from './components/my_text.js'
...
  render() {
    return (
      <View>
        <MyText
          First
        </MyText>

Reactをある程度知っていれば、
Componentの定義やstateの更新による再描画など基本的な書き方は同じなので、
Reactでwebアプリケーションを組む感覚でVRのシーンが組めそうだと感じた。

ちなみに、webブラウザ上での実行時の描画にはThree.jsが使われている。