{"id":352,"date":"2017-03-24T12:00:51","date_gmt":"2017-03-24T03:00:51","guid":{"rendered":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/blog\/2017\/03\/24\/ReactVR"},"modified":"2017-03-24T12:00:51","modified_gmt":"2017-03-24T03:00:51","slug":"ReactVR","status":"publish","type":"post","link":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/blog\/2017\/03\/24\/ReactVR\/","title":{"rendered":"React VR\u306b\u3064\u3044\u3066\u8abf\u3079\u3066\u307f\u305f"},"content":{"rendered":"<p>\u6628\u5e74\u3001React VR\u304c\u30d7\u30ec\u30ea\u30ea\u30fc\u30b9\u3055\u308c\u305f\u3002<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.oculus.com\/blog\/introducing-the-react-vr-pre-release\/\">Introducing the React VR Pre-Release | Oculus<\/a><\/li>\n<\/ul>\n<p>VR\u958b\u767a\u306b\u8208\u5473\u306f\u3042\u308b\u3082\u306e\u306e\u3001\u306a\u304b\u306a\u304b\u624b\u3092\u4ed8\u3051\u3089\u308c\u306a\u304b\u3063\u305f\u304c\u3001\u3068\u308a\u3042\u3048\u305a\u3057\u3089\u3079\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u305f\u3002<\/p>\n<h2 id=\"outline__1\" id=\"react-vr\u3068\u306f\uff1f\">React VR\u3068\u306f\uff1f<\/h2>\n<p><a href=\"https:\/\/developer.oculus.com\/blog\/introducing-the-react-vr-pre-release\/\">Oculus\u306e\u30d6\u30ed\u30b0<\/a>\u3092\u8aad\u3080\u306e\u304c\u624b\u3063\u53d6\u308a\u65e9\u3044\u304c\u3001WebVR\u3092\u3064\u304b\u3063\u3066\u3001\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067VR\u4f53\u9a13\u3092\u53ef\u80fd\u306b\u3059\u308b\u306b\u306f\u3001\u5e73\u9762\u3067\u306e\u958b\u767a\u3068\u306f\u52dd\u624b\u304c\u7570\u306a\u308a\u30013D\u3084\u6620\u50cf\u51e6\u7406\u306e\u77e5\u8b58\u304c\u306a\u3051\u308c\u3070\u96e3\u3057\u3044\u3002<\/p>\n<p>React VR\u306f\u3001\u305d\u308c\u3089\u3092\u96a0\u853d\u3057\u3001\u5f93\u6765\u306eWeb\u958b\u767a\u306b\u8fd1\u3044\u5f62\u3067\u958b\u767a\u3067\u304d\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3042\u308b\u3002\u540c\u3058\u3088\u3046\u306a\u601d\u60f3\u306e\u30e9\u30a4\u30d6\u30e9\u30ea(\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af)\u3068\u3057\u3066\u3001<a href=\"https:\/\/aframe.io\/\">A-Frame<\/a>\u306a\u3069\u304c\u3042\u308b\u304c\u3001React VR\u306e\u30e1\u30ea\u30c3\u30c8\u3068\u3057\u3066\u306f <strong>React\u304c\u4f7f\u3048\u308b<\/strong> \u3053\u3068\u306b\u3042\u308b\u3068\u601d\u3046\u3002\u4f8b\u3048\u3070\u3001\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u7d39\u4ecb\u3055\u308c\u3066\u3044\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u611f\u3058\u306b\u306a\u308b\u3002<\/p>\n<pre><code class=\"language-JavaScript\">class WelcomeToVR extends React.Component {\n  render() {\n    return (\n      &lt;View&gt;\n        &lt;Pano source={asset(&#39;chess-world.jpg&#39;)}\/&gt;\n        &lt;Text\n          style={{\n            backgroundColor: &#39;#777879&#39;,\n            fontSize: 0.8,\n            layoutOrigin: [0.5, 0.5],\n            paddingLeft: 0.2,\n            paddingRight: 0.2,\n            textAlign: &#39;center&#39;,\n            textAlignVertical: &#39;center&#39;,\n            transform: [{translate: [0, 0, -3]}],\n          }}&gt;\n          hello\n        &lt;\/Text&gt;\n      &lt;\/View&gt;\n    );\n  }\n};<\/code><\/pre>\n<p>\u30d3\u30e5\u30fc\u306b\u95a2\u3057\u3066\u306f\u304a\u306a\u3058\u307f\u3001\u3053\u306e\u3042\u305f\u308a\u306fReact Native\u3068\u540c\u3058\u3088\u3046\u306a\u611f\u3058\u3067\u3042\u308b\u3002\u307e\u305f\u3001<code>&lt;View&gt;<\/code>\u3001<code>&lt;Text&gt;<\/code>\u306a\u3069\u3001React Native\u3067\u307f\u305f\u3053\u3068\u306e\u3042\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u4e26\u3093\u3067\u3044\u308b\u3002<\/p>\n<h2 id=\"outline__2\" id=\"\u3069\u3093\u306a\u4ed5\u7d44\u307f\uff1f\">\u3069\u3093\u306a\u4ed5\u7d44\u307f\uff1f<\/h2>\n<p>\u4ed5\u7d44\u307f\u3068\u3057\u3066\u306f\u3001\u4ee5\u4e0b\u306e\u56f3\u306e\u3088\u3046\u306a\u30ec\u30a4\u30e4\u30fc\u306b\u306a\u308b\u3002<\/p>\n<p><img src=\"\/images\/ReactVR\/technical_details.png\" alt=\"\"><\/p>\n<p>\u3053\u308c\u3082\u30d6\u30ed\u30b0\u3092\u8aad\u3080\u306e\u304c\u65e9\u3044\u306e\u3060\u304c\u3001\u5185\u90e8\u7684\u306b\u306f\u3001Three.js\u3092OVRUI\u3067VR\u7528\u306b\u5909\u63db\u3057\u3066\u3044\u308b\u3002\u307e\u305f\u3001React\u306e\u30b3\u30fc\u30c9\u306fWebWorker\u3092\u4f7f\u7528\u3057\u3066\u975e\u540c\u671f\u306b\u8d70\u308b\u306e\u3067\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u7684\u306b\u3082\u6700\u9069\u5316\u3055\u308c\u3066\u3044\u308b\u3068\u306e\u3053\u3068\u3002<\/p>\n<h2 id=\"outline__3\" id=\"\u81ea\u4f5cvr\u3092\u307f\u308b\u306b\u306f\u3069\u3046\u3057\u305f\u3089\u3044\u3044\u306e\uff1f\">\u81ea\u4f5cVR\u3092\u307f\u308b\u306b\u306f\u3069\u3046\u3057\u305f\u3089\u3044\u3044\u306e\uff1f<\/h2>\n<p>\u81ea\u4f5cVR\u3092\u307f\u308b\u306b\u306f\u3001<a href=\"https:\/\/www.oculus.com\/gear-vr\/\">Gear VR<\/a>\u3092\u4f7f\u7528\u3057\u3001Oculus Store\u3067<a href=\"https:\/\/developer.oculus.com\/blog\/carmel-developer-preview-launches-today\/\">Carmel Developer Preview<\/a>\u3068\u3044\u3046WebVR API\u304c\u5b9f\u88c5\u3055\u308c\u305f\u30d6\u30e9\u30a6\u30b6\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3001\u305d\u306e\u4e0a\u3067VR\u3092\u52d5\u304b\u3059\u3002<\/p>\n<p>Carmel\u306f\u307e\u3060\u30d7\u30ec\u30d3\u30e5\u30fc\u7248\u306a\u306e\u3067\u3001<code>\u30a2\u30c9\u30ec\u30b9\u30d0\u30fc\u304c\u3067\u306a\u3044<\/code>\u3001<code>2D web content\u304c\u8868\u793a\u3055\u308c\u306a\u3044<\/code>\u306a\u3069\u672a\u5b9f\u88c5\u306a\u90e8\u5206\u304c\u3042\u308b\u3002\u3057\u304b\u3057\u3001WebVR\u306b\u7279\u5316\u3059\u308b\u306a\u3089\u3001\u6700\u65b0\u306eAPI\u304c\u4f7f\u3048\u308b\u3057\u3001\u6700\u9069\u5316\u3055\u308c\u3066\u3044\u308b\u3068\u306e\u3053\u3068\u3002\u307e\u305f\u3001\u512a\u5148\u7684\u306b\u3053\u308c\u3089\u3092\u6539\u5584\u3057\u3066\u3044\u304f\u3068\u30a2\u30ca\u30a6\u30f3\u30b9\u3082\u3057\u3066\u304a\u308a\u3001FB\u306e\u672c\u6c17\u3092\u611f\u3058\u308b\u3002<\/p>\n<p>React VR\u306f\u3001Gear VR\u3092\u3082\u3063\u3066\u3044\u306a\u3044\u5834\u5408\u3067\u3082\u3001\u666e\u6bb5\u4f7f\u7528\u3057\u3066\u3044\u308b\u30d6\u30e9\u30a6\u30b6\u3067\u958b\u767a\u304c\u3067\u304d\u308b\u3002\u305f\u3060\u3057\u3001\u3082\u3061\u308d\u3093VR\u304c\u3067\u304d\u308b\u308f\u3051\u3067\u306f\u306a\u304f\u3001\u81ea\u52d5\u7684\u306bWebGL\u3078\u30c0\u30a6\u30f3\u30b0\u30ec\u30fc\u30c9\u3055\u308c\u305fUI\u3092\u958b\u767a\u3059\u308b\u3053\u3068\u3068\u306a\u308b\u3002<\/p>\n<p>\u30c7\u30d0\u30c3\u30b0\u306b\u95a2\u3057\u3066\u306f\u3001Hot Reloading\u3001Nuclide\u306eReact Dev Tools Inspector\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u3066\u3001React Native\u540c\u69d8\u306b\u3001Web\u306e\u4e16\u754c\u306e\u958b\u767a\u30a4\u30c6\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u305d\u306e\u307e\u307e\u6301\u3061\u8fbc\u3081\u308b(\u305d\u3082\u305d\u3082React Native\u306e\u3088\u3046\u306b\u30cd\u30a4\u30c6\u30a3\u30d6\u306e\u4e16\u754c\u3067\u52d5\u304b\u3057\u3066\u3044\u308b\u308f\u3051\u3067\u3082\u306a\u3044)\u3002\u307e\u305f\u3001WebVR\u3060\u3051\u3042\u3063\u3066\u3001Chrome Developer Tools\u3082\u4f7f\u7528\u3067\u304d\u308b\u3002\u3053\u308c\u3089\u3092\u307f\u308b\u3068\u3001\u7279\u306b\u30b9\u30c8\u30ec\u30b9\u306a\u304f\u30c7\u30d0\u30c3\u30b0\u30b5\u30a4\u30af\u30eb\u304c\u307e\u308f\u308b\u306f\u305a\u3060\u3068\u8003\u3048\u305f\u3002<\/p>\n<h2 id=\"outline__4\" id=\"\u3069\u3093\u306a\u3053\u3068\u304c\u3067\u304d\u308b\u306e\uff1f\">\u3069\u3093\u306a\u3053\u3068\u304c\u3067\u304d\u308b\u306e\uff1f<\/h2>\n<p>\u4eca\u56de\u306f\u3001\u3044\u304f\u3064\u304b\u30b5\u30f3\u30d7\u30eb\u3092\u52d5\u304b\u3057\u3066\u307f\u3088\u3046\u3068\u601d\u3046\u3002\u307e\u305a\u306f<a href=\"https:\/\/facebook.github.io\/react-vr\/docs\/getting-started.html\">Getting Started<\/a>\u306e\u30b5\u30f3\u30d7\u30eb\u3092\u307f\u3066\u3044\u304f\u304c\u3001\u305d\u308c\u305e\u308c\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u611f\u3058\u3067\u3042\u308b\u3002\u30b3\u30fc\u30c9\u306f\u4e00\u90e8\u629c\u7c8b\u306a\u306e\u3067\u3001\u8208\u5473\u306e\u3042\u308b\u4eba\u306f\u53c2\u8003\u30ea\u30f3\u30af\u304b\u3089\u3068\u3093\u3067\u304f\u3060\u3055\u3044\u3002<\/p>\n<h4 id=\"outline__4_0_1\" id=\"mesh\u30e2\u30c7\u30eb\">Mesh\u30e2\u30c7\u30eb<\/h4>\n<p><img src=\"\/images\/ReactVR\/mesh.gif\" alt=\"\"><\/p>\n<pre><code class=\"language-JavaScript\">class MeshSample extends React.Component {\n  constructor() {\n    super();\n    this.state      = {rotation: 0};\n    this.lastUpdate = Date.now();\n    this.rotate     = this.rotate.bind(this);\n  }\n\n  rotate() {\n    const now       = Date.now();\n    const delta     = now - this.lastUpdate;\n    this.lastUpdate = now;\n    this.setState({rotation: this.state.rotation + delta \/ 20});\n    this.frameHandle = requestAnimationFrame(this.rotate);\n  }\n\n  componentDidMount() {\n    this.rotate();\n  }\n\n  componentWillUnmount() {\n    if (this.frameHandle) {\n      cancelAnimationFrame(this.frameHandle);\n      this.frameHandle = null;\n    }\n  }\n\n  render() {\n    return (\n      &lt;View&gt;\n        &lt;Pano source={asset(&#39;chess-world.jpg&#39;)}\/&gt;\n        &lt;Mesh\n          style={{\n            transform: [\n              {translate: [0, -15, -70]},\n              {scale : 0.1 },\n              {rotateY : this.state.rotation},\n              {rotateX : -90}\n            ],\n          }}\n          source={{mesh:asset(&#39;creature.obj&#39;), mtl:asset(&#39;creature.mtl&#39;), lit: true}}\n        \/&gt;\n        &lt;PointLight style={{color:&#39;white&#39;, transform:[{translate : [0, 400, 700]}]}} \/&gt;\n\n        &lt;Text style={style}&gt;Creature&lt;\/Text&gt;\n        &lt;\/View&gt;\n    );\n  }\n};<\/code><\/pre>\n<h4 id=\"outline__4_0_2\" id=\"\u30ec\u30a4\u30a2\u30a6\u30c8\">\u30ec\u30a4\u30a2\u30a6\u30c8<\/h4>\n<p><img src=\"\/images\/ReactVR\/layout.gif\" alt=\"\"><\/p>\n<pre><code class=\"language-JavaScript\">class LayoutSample extends React.Component {\n  render() {\n    return (\n      &lt;View&gt;\n        &lt;Pano source={asset(&#39;chess-world.jpg&#39;)} \/&gt;\n        &lt;View style={{\n          flex: 1,\n          flexDirection: &#39;column&#39;,\n          width: 2,\n          alignItems: &#39;stretch&#39;,\n          transform: [{translate: [-1, 1, -5]}],\n        }}&gt;\n          &lt;HighlightView text=&#39;Red&#39; backgroundColor=&#39;red&#39;\/&gt;\n          &lt;HighlightView text=&#39;Orange&#39; backgroundColor=&#39;orange&#39;\/&gt;\n          &lt;HighlightView text=&#39;Yellow&#39; backgroundColor=&#39;yellow&#39;\/&gt;\n          &lt;HighlightView text=&#39;Green&#39; backgroundColor=&#39;green&#39;\/&gt;\n          &lt;HighlightView text=&#39;Blue&#39; backgroundColor=&#39;blue&#39;\/&gt;\n        &lt;\/View&gt;\n      &lt;\/View&gt;\n    );\n  }\n}<\/code><\/pre>\n<h4 id=\"outline__4_0_3\" id=\"\u30c4\u30a2\u30fc\">\u30c4\u30a2\u30fc<\/h4>\n<p><img src=\"\/images\/ReactVR\/tour.gif\" alt=\"\"><\/p>\n<pre><code class=\"language-JavaScript\">\/* setState\u306b\u3088\u3063\u3066nextLocationId\u3092\u51fa\u3057\u5206\u3051\u3001\u9077\u79fb\u3092\u5b9f\u73fe\u3057\u3066\u3044\u308b *\/\nclass TourSample extends React.Component {\n  render() {\n    return (\n      &lt;View&gt;\n        &lt;View style={{transform:[{rotateY: rotation}]}}&gt;\n          &lt;Pano source={asset(this.state.data.photos[this.state.nextLocationId].uri)}\/&gt;\n          &lt;NavButton\n            key={tooltip.linkedPhotoId}\n            isLoading={isLoading}\n            onClickSound={asset(soundEffects.navButton.onClick.uri)}\n            onEnterSound={asset(soundEffects.navButton.onEnter.uri)}\n            onInput={() =&gt; {\n              this.setState({nextLocationId: tooltip.linkedPhotoId});\n            }}\n            rotateY={tooltip.rotationY}\n            source={asset(this.state.data.nav_icon)}\n            textLabel={tooltip.text}\n            translateZ={this.translateZ}\n          \/&gt;\n        &lt;\/View&gt;\n      &lt;\/View&gt;\n    );\n  }\n};<\/code><\/pre>\n<h4 id=\"outline__4_0_4\" id=\"cube\">Cube<\/h4>\n<p><img src=\"\/images\/ReactVR\/cube.gif\" alt=\"\"><\/p>\n<pre><code class=\"language-JavaScript\">\/\/ \u4f5c\u6210\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u5bfe\u3057\u3066\u30ab\u30b9\u30bf\u30e03D\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u5f53\u3066\u8fbc\u3093\u3067\u3044\u308b\nfunction init(bundle, parent, options) {\n\n  const scene = new THREE.Scene();\n  const cubeModule = new CubeModule();\n\n  const vr = new VRInstance(bundle, &#39;CubeSample&#39;, parent, {\n    cursorVisibility: &#39;visible&#39;,\n    nativeModules: [ cubeModule ],\n    scene: scene,\n  });\n\n  const cube = new THREE.Mesh(\n    new THREE.BoxGeometry(1, 1, 1),\n    new THREE.MeshBasicMaterial()\n  );\n  cube.position.z = -4;\n  scene.add(cube);\n\n  cubeModule.init(cube);\n\n  vr.render = function(timestamp) {\n    const seconds = timestamp \/ 1000;\n    cube.position.x = 0 + (1 * (Math.cos(seconds)));\n    cube.position.y = 0.2 + (1 * Math.abs(Math.sin(seconds)));\n  };\n\n  vr.start();\n  return vr;\n}<\/code><\/pre>\n<p>\u4ed6\u306b\u3082\u3001\u4ee5\u4e0b\u306e\u69d8\u306a\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/p>\n<h4 id=\"outline__4_0_5\" id=\"\u30d1\u30ce\u30e9\u30de\u5199\u771f\">\u30d1\u30ce\u30e9\u30de\u5199\u771f<\/h4>\n<p><img src=\"\/images\/ReactVR\/pano.gif\" alt=\"\"><\/p>\n<pre><code class=\"language-JavaScript\">render() {\n  return (\n    &lt;View&gt;\n      &lt;Pano source={asset(&#39;sample_pano.jpg&#39;)}\/&gt;\n    &lt;\/View&gt;\n  );\n}<\/code><\/pre>\n<h4 id=\"outline__4_0_6\" id=\"\u81ea\u5206\u30676\u65b9\u4f4d\u306e\u9762\u3092\u753b\u50cf\u3067\u5b9a\u7fa9\">\u81ea\u5206\u30676\u65b9\u4f4d\u306e<code>\u9762<\/code>\u3092\u753b\u50cf\u3067\u5b9a\u7fa9<\/h4>\n<p><img src=\"\/images\/ReactVR\/cubic_pano_1.gif\" alt=\"\"><\/p>\n<pre><code class=\"language-JavaScript\">render() {\n  return (\n    &lt;View&gt;\n      &lt;Pano source={{ uri: [\n        &#39;..\/static_assets\/sample_right.jpg&#39;,\n        &#39;..\/static_assets\/sample_left.jpg&#39;,\n        &#39;..\/static_assets\/sample_top.jpg&#39;,\n        &#39;..\/static_assets\/sample_bottom.jpg&#39;,\n        &#39;..\/static_assets\/sample_back.jpg&#39;,\n        &#39;..\/static_assets\/sample_front.jpg&#39;\n      ]}} \/&gt;\n    &lt;\/View&gt;\n  );\n}<\/code><\/pre>\n<p><img src=\"\/images\/ReactVR\/cubic_pano_2.gif\" alt=\"\"><\/p>\n<pre><code class=\"language-JavaScript\">render() {\n  return (\n    &lt;View&gt;\n      &lt;Pano source={{ uri: [\n        &#39;..\/static_assets\/sahara_rt.jpg&#39;,\n        &#39;..\/static_assets\/sahara_lf.jpg&#39;,\n        &#39;..\/static_assets\/sahara_up.jpg&#39;,\n        &#39;..\/static_assets\/sahara_dn.jpg&#39;,\n        &#39;..\/static_assets\/sahara_bk.jpg&#39;,\n        &#39;..\/static_assets\/sahara_ft.jpg&#39;\n      ]}} \/&gt;\n    &lt;\/View&gt;\n  );\n}<\/code><\/pre>\n<h4 id=\"outline__4_0_7\" id=\"\u30ba\u30fc\u30e0\u30a4\u30f3\u30fb\u30a2\u30a6\u30c8\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\">\u30ba\u30fc\u30e0\u30a4\u30f3\u30fb\u30a2\u30a6\u30c8\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/h4>\n<p><img src=\"\/images\/ReactVR\/animating.gif\" alt=\"\"><\/p>\n<pre><code class=\"language-JavaScript\">render() {\n  return (\n    &lt;View&gt;\n      &lt;Pano source={ {uri: this.spaceSkymap} }\/&gt;\n      &lt;AmbientLight intensity={ 2.6 } \/&gt;\n      &lt;View style={ this.styles.menu }&gt;\n        &lt;Button text=&#39;+&#39; callback={() =&gt; this.setState((prevState) =&gt; ({ zoom: prevState.zoom + 10 }) ) } \/&gt;\n        &lt;Button text=&#39;-&#39; callback={() =&gt; this.setState((prevState) =&gt; ({ zoom: prevState.zoom - 10 }) ) } \/&gt;\n      &lt;\/View&gt;\n      &lt;Mesh\n        style={{\n          transform: [\n            {translate: [-25, 0, this.state.zoom]}, {scale: 0.05 }, {rotateY: this.state.rotation}, {rotateX: 20}, {rotateZ: -10}\n          ]\n        }}\n        source={{mesh:asset(&#39;earth.obj&#39;), mtl:asset(&#39;earth.mtl&#39;), lit: true}} \/&gt;\n      &lt;Mesh\n        style={{\n          transform: [\n            {translate: [10, 10, this.state.zoom - 30]}, {scale: 0.05}, {rotateY: this.state.rotation \/ 3},\n          ]\n        }}\n        source={{mesh:asset(&#39;moon.obj&#39;), mtl:asset(&#39;moon.mtl&#39;), lit: true}} \/&gt;\n    &lt;\/View&gt;\n  );\n}<\/code><\/pre>\n<h4 id=\"outline__4_0_8\" id=\"\u305d\u306e\u4ed6\">\u305d\u306e\u4ed6<\/h4>\n<ul>\n<li>Style\u306f\u3001React Native\u3068\u540c\u3058\u3088\u3046\u306a\u611f\u3058\u3060\u304c\u3001flexbox\u3092\u306f\u3058\u3081\u3068\u3059\u308bCSS\u30e9\u30a4\u30af\u306a\u69cb\u6587\u304c\u4f7f\u3048\u308b<\/li>\n<li>Three.js\u3067\u30ab\u30b9\u30bf\u30e0\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3082\u4f5c\u6210\u53ef\u80fd\u3002React Native\u3068\u9055\u3044\u3001JS\u3060\u3051\u66f8\u3051\u3070\u3044\u3044\u3068\u601d\u3046\u3068\u697d<\/li>\n<li>\u73fe\u6642\u70b9\u3067\u306fAPI\u3082\u3051\u3063\u3053\u3046\u9650\u3089\u308c\u3066\u3044\u308b\u305f\u3081\u3001Three.js\u306b\u8a73\u3057\u304f\u306a\u3051\u308c\u3070\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u5411\u304d\u4e0d\u5411\u304d\u3092\u3057\u3063\u304b\u308a\u8003\u3048\u305f\u307b\u3046\u304c\u826f\u3055\u305d\u3046\u3002<\/li>\n<li>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306f\u3055\u304f\u3063\u3068\u8aad\u307f\u5207\u308c\u308b\u91cf\u306a\u306e\u3067\u3001\u4e8b\u524d\u306b\u4f7f\u3048\u308bAPI\u3092\u628a\u63e1\u3057\u3066\u304a\u304f\u3068\u826f\u3055\u305d\u3046<\/li>\n<\/ul>\n<h2 id=\"outline__5\" id=\"\u307e\u3068\u3081\">\u307e\u3068\u3081<\/h2>\n<p>\u30d6\u30e9\u30a6\u30b6\u3067\u898b\u308b\u3076\u3093\u306b\u306f\u305f\u3060\u306eWebGL\u306a\u306e\u3067\u305d\u3053\u307e\u3067\u611f\u52d5\u306f\u306a\u3044\u304c\u3001\u3053\u308c\u304c\u305d\u306e\u307e\u307eVR\u306b\u5c55\u958b\u3067\u304d\u308b\u3068\u8003\u3048\u308b\u3068\u3059\u3054\u3044\u3068\u601d\u3046\u3002\u307e\u305f\u3001React VR\u306b\u3088\u3063\u3066\u5ba3\u8a00\u7684\u306b\u30d3\u30e5\u30fc\u3092\u4f5c\u308c\u308b\u306e\u3082\u3001\u305f\u3057\u304b\u306b\u958b\u767a\u52b9\u7387\u304c\u4e0a\u304c\u308a\u305d\u3046\u3067\u3042\u308b\u3002Three.js\u306e\u6642\u4ee3\u3068\u9055\u3044\u3001\u9069\u5ea6\u306b\u96a0\u853d\u3055\u308c\u3066\u3044\u3066\u3001\u30b3\u30fc\u30c9\u304c\u975e\u5e38\u306b\u8aad\u307f\u3084\u3059\u3044\u306e\u306f\u5b09\u3057\u3044\u3002<\/p>\n<p>WebVR\u306b\u95a2\u3057\u3066\u306f\u904e\u53bb\u306b\u3082\u5ea6\u3005\u8a71\u984c\u306b\u306a\u3063\u3066\u3044\u305f\u304c\u3001\u52b9\u7387\u7684\u306b\u958b\u767a\u3067\u304d\u308b\u624b\u6bb5\u304c\u6210\u719f\u3057\u3066\u3044\u304f\u3068\u3001\u3053\u308c\u307e\u3067\u306a\u304b\u3063\u305f\u53ef\u80fd\u6027\u304c\u5e83\u304c\u308a\u305d\u3046\u3067\u9762\u767d\u3044\u3002<\/p>\n<p>\u4f8b\u3048\u3070\u3001WebVR\u305d\u306e\u3082\u306e\u306e\u30e1\u30ea\u30c3\u30c8\u3068\u3057\u3066\u3001VR\u7aef\u672b\u3092\u6301\u3063\u3066\u3044\u306a\u304f\u3066\u3082\u3001\u30d6\u30e9\u30a6\u30b6\u304b\u3089WebGL\u3068\u3057\u3066\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u305f\u3081\u3001VR\u5c02\u7528\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u3059\u308b\u5fc5\u8981\u304c\u7121\u3044(\u3088\u308a\u591a\u304f\u306e\u30e6\u30fc\u30b6\u30fc\u306b\u30a2\u30d7\u30ed\u30fc\u30c1\u3067\u304d\u308b)\u3001\u5f93\u6765\u306e\u30d6\u30e9\u30a6\u30b6\u3068\u540c\u3058\u3088\u3046\u306b\u30b7\u30f3\u30d7\u30eb\u306b\u5171\u6709\u3067\u304d\u308b\u3001\u306a\u3069\u304c\u3042\u308b\u3002\u5411\u304d\u4e0d\u5411\u304d\u306f\u3042\u308b\u304c\u3001\u30b2\u30fc\u30e0\u4ee5\u5916\u306e\u3001\u30a2\u30af\u30bb\u30b9\u3084\u30b7\u30a7\u30a2\u304c\u91cd\u8981\u306b\u306a\u3063\u3066\u304f\u308b\u3001\u52d5\u753b\u3084\u753b\u50cf\u30d9\u30fc\u30b9\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3067\u6709\u76ca\u306a\u306e\u3067\u306f\u306a\u3044\u3060\u308d\u3046\u304b\u3002<\/p>\n<p>\u4ee5\u4e0a\u3001React VR\u306b\u3064\u3044\u3066\u3057\u3089\u3079\u3066\u307f\u307e\u3057\u305f\u3002VR\u521d\u5fc3\u8005\u306a\u306e\u3067\u3001\u306a\u306b\u304b\u9593\u9055\u3063\u3066\u3044\u305f\u3089\u3054\u6307\u6458\u304f\u3060\u3055\u3044\u3002<\/p>\n<h2 id=\"outline__6\" id=\"\u53c2\u8003\">\u53c2\u8003<\/h2>\n<ul>\n<li><a href=\"https:\/\/facebook.github.io\/react-vr\/index.html\">React VR | A framework for building VR apps using React<\/a><\/li>\n<li><a href=\"https:\/\/developer.oculus.com\/blog\/introducing-the-react-vr-pre-release\/\">Introducing the React VR Pre-Release | Oculus<\/a><\/li>\n<li><a href=\"https:\/\/developer.oculus.com\/blog\/carmel-developer-preview-launches-today\/\">Carmel Developer Preview Launches Today | Oculus<\/a><\/li>\n<li><a href=\"https:\/\/www.pluralsight.com\/guides\/front-end-javascript\/getting-started-with-react-vr\">Getting started with React VR<\/a><\/li>\n<li><a href=\"https:\/\/www.slideshare.net\/jujunjun110\/2017-web-vr\">\u3053\u3053\u307e\u3066\u3099\u6765\u305f\uff012017\u5e74 Web VR\u3066\u3099\u3066\u3099\u304d\u308b\u3053\u3068<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u6628\u5e74\u3001React VR\u304c\u30d7\u30ec\u30ea\u30ea\u30fc\u30b9\u3055\u308c\u305f\u3002 Introducing the React VR Pre-Release | Oculus VR\u958b\u767a\u306b\u8208\u5473\u306f\u3042\u308b\u3082\u306e\u306e\u3001\u306a\u304b\u306a\u304b\u624b\u3092\u4ed8\u3051\u3089\u308c\u306a\u304b\u3063\u305f\u304c\u3001\u3068\u308a\u3042\u3048\u305a\u3057\u3089\u3079\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u305f\u3002 React VR\u3068\u306f\uff1f Oculus\u306e\u30d6\u30ed\u30b0\u3092\u8aad\u3080\u306e\u304c\u624b\u3063\u53d6\u308a\u65e9\u3044\u304c\u3001WebVR\u3092\u3064\u304b\u3063\u3066\u3001\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067VR\u4f53\u9a13\u3092\u53ef\u80fd\u306b\u3059\u308b\u306b\u306f\u3001\u5e73\u9762\u3067\u306e\u958b\u767a\u3068\u306f\u52dd\u624b\u304c\u7570\u306a\u308a\u30013D\u3084 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":826,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/posts\/352"}],"collection":[{"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/comments?post=352"}],"version-history":[{"count":0,"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/posts\/352\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/media\/826"}],"wp:attachment":[{"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/media?parent=352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/categories?post=352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/wp-json\/wp\/v2\/tags?post=352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}