expo-three라고 하는 라이브러리를 도입하려고 생각했습니다만, 일본어 문헌이 적게 시간이 걸려 버렸기 때문에, 스스로 재검토하는 의도도 담아 간단하게 정리하겠습니다.
react-native, expo 등의 도입에 대해서는 이번은 생략하겠습니다.

가는

three,expo-three install

npm install three --savenpm 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만 씁니다.

렌더러

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();
  };

}

읽어 보면 굉장한 짧은 코드로 구현할 수 있다고 느꼈습니다.
세세한 곳의 문장의 의미가 아직 자신 속에서 모호하기 때문에 제대로 이해해 나가면 좋겠다고 생각합니다.

참고문헌

· htps : // 기주 b. 코 m / e x po / e x po th Ree
· htps : // 레아 ct 샤린 g. 코 m/인 t로즈신 g-에 x 포아 rth 에-js-온-아 r t. HTML
· htps : // 메이 m. 코 m / @ 요오비 55 / c 레 아친 g-3 dsp