Expoでのreact-nativeでthree.jsを使う(expo-three導入)

expo-threeというライブラリを導入しようと思ったのですが、日本語文献が少なく時間が掛かってしまった為、自分で見直す意図も込めて簡単にまとめさせていただきます。
react-native,expo等の導入については今回は省略させて頂きます。

かいていく

three,expo-threeのinstall

npm install three --save
npm install expo-three --save

import

App.js

import { GLView } from 'expo';
import React from 'react';
import { View } from 'react-native';
import * as THREE from "three";
import ExpoTHREE from 'expo-three';

import { GLView } from 'expo';
を
import Expo from 'expo';
にして、次に出てくる<GLView>を<Expo.GLView>って書いてもいいはず。

render()

App.js

export default class App extends React.Component {
  render() {
    return (
      <GLView
        style={{ flex: 1 }}
        onContextCreate={this._onGLContextCreate}
      />
    )
  }
  _onGLContextCreate = async (gl) => {
  // atode
  };
}

今回は超シンプルにGLViewだけ書きます。

Renderer

App.js

_onGLContextCreate = async (gl) => {
  const renderer = new ExpoTHREE.Renderer({ gl });
  or
  const renderer = ExpoTHREE.createRenderer({ gl });
  renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);
};

二種類Renderer作る書き方があるみたいです。
後者が拡張rendererの従来のエイリアスらしいです。僕はまだ良く分かりません。

たくさんの警告！！

沢山警告が出ますが動作には関係ない見たいです。
この警告を無視していいと知らず解決策を必死に調べてたのが一番時間をロスした箇所です

警告の非表示

表示が気になるので消していきたいと思います。
コードの上の方に
console.disableYellowBox = true;
と書けば大丈夫です。

これで、後はthree.jsで書いたコードを追加していけばいいみたいです。

three.js部分の追加

App.js

_onGLContextCreate = async (gl) => {
  const renderer = new ExpoTHREE.Renderer({gl});
  renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 1000
  );
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh( geometry, material );
  scene.add(cube);

  camera.position.z = 5;

  const animate = () => {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.07;
    cube.rotation.y += 0.04;
    renderer.render(scene, camera);
    gl.endFrameEXP();
  }
  animate();
};

表示されました
これにて今回の導入は終了とさせて頂きます。

まとめ

App.js

import { GLView } from 'expo';
import React from 'react';
import { View } from 'react-native';
import * as THREE from "three";
import ExpoTHREE from 'expo-three';

console.disableYellowBox = true;

export default class App extends React.Component {
  render() {
    return (
      <GLView
        style={{ flex: 1 }}
        onContextCreate={this._onGLContextCreate}
      />
    )
  }

  _onGLContextCreate = async (gl) => {
    const renderer = ExpoTHREE.createRenderer({ gl });
    renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75, gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 1000
    );
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh( geometry, material );
    scene.add(cube);

    camera.position.z = 5;

    const animate = () => {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.07;
      cube.rotation.y += 0.04;
      renderer.render(scene, camera);
      gl.endFrameEXP();
    }
    animate();
  };

}

読み返してみれば凄い短いコードで実装できるんだなと感じました。
細かい所の文の意味がまだ自分の中で曖昧なのでしっかり理解していけたらなと思います。

参考文献

・https://github.com/expo/expo-three
・https://reactsharing.com/introducing-expo-ar-three-js-on-arkit.html
・https://medium.com/@yoobi55/creating-3d-sphere-component-with-react-native-and-three-c5fb46dadbd