three.js를 스마트 폰 앱으로 움직여 따뜻하게합니다 (react-native-webgl 도입 절차)

추가



react-native-webgl 은 deprecated 되었습니다 ...

RN의 새로운 버전에서는 react-native-webgl이 작동하지 않는다고 생각하므로 권장됩니다 expo-gl을 사용합시다!

소개



이 기사에서는 react-native-webgl 이라는 라이브러리의 도입 순서에 대해 씁니다.

react-native-webgl은 React Native 에서 WebGL 을 사용하기 위한 라이브러리입니다.
이것을 사용하면 네이티브 앱으로 three.js를 사용할 수 있게 되므로, 시험에 만들어 보았습니다!

우선 스마트 폰 카이로로 해 보았습니다만, 누군가 멋진 앱 만들어 주지 않을까・・・

iOS : htps: //언제나 s. 아 ぇ. 코 m / u s / 아 p / th ree js-nachi ゔ / d1447928256
Android : htps : // p ぁ y. 오, ぇ. 이 m / s 취해 / 아 ps /에서 원하는 ls? 아니 d = m. th


  • 앱의 네 가지 장면 중 Octahedron을 많이 표시하는 것이 가장 많습니다.
  • segments(폴리곤의 분할수)등의 파라미터는, 최대로 하면 메모리가 부족해 앱이 떨어지는 일이 있기 때문에, 서서히 올려 봐 주세요.

  • React Native 준비



    공식 getting-started 거리에 준비합시다.
    이번에는 expo을 사용하지 않으므로 "Quick Start"가 아니라 "Building Projects with Native Code"의 탭을 따르십시오.

    react-native-webgl 설치



    React Native의 최신은 이 기사의 쓰기 시점에서 0.58입니다만, 이 버젼에서는 빌드가 통과하지 않기 때문에, 0.57로 합니다.
    # init
    react-native init threejsNative --version 0.57
    cd threejsNative
    

    그런 다음 react-native-webgl 패키지를 설치하고 링크합니다.
    yarn add react-native-webgl
    react-native link react-native-webgl
    

    iOS



    New Build System에서는 GPUImage라는 프로젝트 주위에서 에러가 나오기 때문에 Legacy Build System으로 변경합니다.

    File -> Workspace Settings... -> Build System -> Legacy Build System




    안드로이드



    issue를 읽으면서 여러 가지를 다시 씁니다.

    android/build.gradle
      buildscript {
    
        ext {
    
    -     minSdkVersion = 16
    +     minSdkVersion = 17
    
        }
    
        dependencies {
    
    +     classpath 'de.undercouch:gradle-download-task:3.1.2'
    
        }
    

    node_modules/react-native-webgl/android/src/main/jni/Application.mk
    - APP_PLATFORM := android-9
    + APP_PLATFORM := android-16
    
    - APP_STL := gnustl_shared
    + APP_STL := c++_shared
    
    - NDK_TOOLCHAIN_VERSION := 4.9
    

    node_modules/react-native-webgl/android/build.gradle
      task packageRNWebGLLibs(dependsOn: buildRNWebGLLib, type: Copy) {
    
    -   exclude '**/gnustl_shared.so'
    +   exclude '**/libc++_shared.so'
    
      }
    
      android {
    
    -   buildToolsVersion '25.0.0'
    +   buildToolsVersion '27.0.3'
    
      }
    
      dependencies {
    -   compile "com.facebook.react:react-native:+"  // From node_modules
    +   implementation "com.facebook.react:react-native:+"  // From node_modules
      }
    
    exclude '**/libc++_shared.so' 에서 빌드가 통과하지 않을 때는 include '**/libc++_shared.so' 에서 잘 작동하는 경우가 있습니다.

    three.js 로드



    그리고는 공식 example 의 거리입니다.
    yarn add three
    

    three.js
    const THREE = require("three");
    global.THREE = THREE;
    if (!window.addEventListener)
        window.addEventListener = () => { };
    require("three/examples/js/renderers/Projector");
    export default THREE;
    

    App.js
    import React from "react";
    import { View } from "react-native";
    import { WebGLView } from "react-native-webgl";
    import THREE from "./three";
    
    export default class App extends React.Component {
      requestId: *;
      componentWillUnmount() {
        cancelAnimationFrame(this.requestId);
      }
      onContextCreate = (gl: WebGLRenderingContext) => {
        const rngl = gl.getExtension("RN");
    
        const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;
        const renderer = new THREE.WebGLRenderer({
          canvas: {
            width,
            height,
            style: {},
            addEventListener: () => {},
            removeEventListener: () => {},
            clientHeight: height
          },
          context: gl
        });
        renderer.setSize(width, height);
        renderer.setClearColor(0x000000, 1);
    
        let camera, scene;
        let cube;
    
        function init() {
          // ここにcameraやsceneのコードを書く
          camera = new THREE.PerspectiveCamera(75, width / height, 1, 1100);
          camera.position.y = 150;
          camera.position.z = 500;
          scene = new THREE.Scene();
    
          let geometry = new THREE.BoxGeometry(200, 200, 200);
          for (let i = 0; i < geometry.faces.length; i += 2) {
            let hex = Math.random() * 0xffffff;
            geometry.faces[i].color.setHex(hex);
            geometry.faces[i + 1].color.setHex(hex);
          }
    
          let material = new THREE.MeshBasicMaterial({
            vertexColors: THREE.FaceColors,
            overdraw: 0.5
          });
    
          cube = new THREE.Mesh(geometry, material);
          cube.position.y = 150;
          scene.add(cube);
        }
        const animate = () => {
          this.requestId = requestAnimationFrame(animate);
          renderer.render(scene, camera);
    
          // ここにアニメーションのコードを書く
          cube.rotation.y += 0.05;
    
          gl.flush();
          rngl.endFrame();
        };
    
        init();
        animate();
      };
      render() {
        return (
          <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <WebGLView
              style={{ width: 300, height: 300 }}
              onContextCreate={this.onContextCreate}
            />
          </View>
        );
      }
    }
    

    three.js 부분은 평소와 거의 똑같이 쓸 수 있습니다!

    실행



    iOS/Android 각각에서 객체가 표시되면 성공입니다.
    react-native run-ios
    react-native run-android
    

    요약



    react-native-webgl을 사용하여 스마트 폰 앱에서 three.js를 이동하는 방법에 대해 썼습니다.
    three.js를 사용한 멋진 앱이 더욱 늘어나면 기쁩니다!

    좋은 웹페이지 즐겨찾기