React VR CLI에서 init 명령 실행 시도

13824 단어 ReactReactVR
드디어 막바지Classi Advent Calendar 2017에 이르렀다는 24일째 보도다.
그럼 이번에 리액트 VR에 대해 살짝 봤는데 그 이야기예요.

React VR

  • 자바스크립트를 통해 VR 앱을 제작할 수 있는 프로그램 라이브러리
  • 오큘러스와 페이스북이 개발 중
  • 리액트와 마찬가지로 구성 요소를 기반으로 하기 때문에 리액트 경험이 있는 사람은 쉽게 접촉할 수 있다
  • React VR CLI라는 도구를 제공하여 하나의 명령으로 프로젝트를 만들 수 있음

    • React VR CLI를 사용하여 프로젝트 작성

  • React VR CLI라는 CLI 도구가 준비되어 있어 사용하면 쉽게 만들 수 있습니다.
  • yarn 또는 npm로 CLI 도구를 설치하고 설치 후 init 명령을 실행
    • $ yarn global add react-vr-cli
$ react-vr # ← バージョンの確認ができる
$ react-vr init WelcomeToVR
  • yarn start에서 시작하기 때문에 방문http://localhost:8081/vr/ 시 샘플 확인
    • $ cd WelcomeToVR
$ yarn start

    React VR을 구성하는


    만든 항목의 패키지입니다.제이슨을 보면 뭘 쓰는지 알 수 있어요.
  • WelcomeToVR/package.json
  • React 연결 외에 OVRUI와 three.js
  • three.js
  • JS용 3D 라이브러리
  • OVRUI
  • Oculus VR UI

    • 소스 코드 보기 방법

  • entrypoint는 WelcomToVR/vr/index입니다.html
    • index.html
    <html>
  <head>
    <title>WelcomeToVR</title>
    <style>body { margin: 0; }</style>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  </head>
  <body>
    <!-- When you're ready to deploy your app, update this line to point to your compiled client.bundle.js -->
    <script src="./client.bundle?platform=vr"></script>
    <script>
      // Initialize the React VR application
      ReactVR.init(
        // When you're ready to deploy your app, update this line to point to
        // your compiled index.bundle.js
        '../index.vr.bundle?platform=vr&dev=true',
        // Attach it to the body tag
        document.body
      );
    </script>
  </body>
</html>
    아홉 번째 줄을 보면 클라이언트야.js(vr/client.js)를 읽는 중 client.js
    // Auto-generated content.
// This file contains the boilerplate to set up your React app.
// If you want to modify your application, start in "index.vr.js"

// Auto-generated content.
import {VRInstance} from 'react-vr-web';

function init(bundle, parent, options) {
  const vr = new VRInstance(bundle, 'WelcomeToVR', parent, {
    // Add custom options here
    ...options,
  });
  vr.render = function() {
    // Any custom behavior you want to perform on each frame goes here
  };
  // Begin the animation loop
  vr.start();
  return vr;
}

window.ReactVR = {init};
  • client.js를 보면 JS의 창 대상에 추가ReactVR되었기 때문에 사용할 수 있다ReactVR.init()
  • 다시 index., 여기서 index를 선택합니다.vr.js 읽는 중
    • main의 처리는 index입니다.vr.js가 책임진다index.vr.js
    import React from 'react';
import {
  AppRegistry,
  asset,
  Pano,
  Text,
  View,
} from 'react-vr';

export default class WelcomeToVR extends React.Component {
  render() {
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <Text
          style={{
            backgroundColor: '#777879',
            fontSize: 0.8,
            fontWeight: '400',
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -3]}],
          }}>
          hello
        </Text>
      </View>
    );
  }
};
  • 이걸 봤는데 가장 바깥쪽에 View Component가 존재하는데 그 중에서Pano Component와Text Component가 불린다
    • View Component
  • UI 생성을 위한 가장 기본적인 구성 요소
  • View Component는 다른 구성 요소로 설계되었습니다.
  • 이번에는 Pano와 Text
    • 가 있습니다.
    Pano Component
  • 지정한 이미지를 구에 표시하는 구성 요소(다음 두 가지 모드로 지정)
  • 360도 카메라로 찍은 이미지 설정
  • 6장의 정사각형 이미지를 라이트,left,top,bottom,back,front 순서대로 설정
    • Text Component
  • 텍스트를 표시하는 구성 요소
  • 구성 장소, 색상, 크기 등을 지정할 수 있음

    • Dev tools

  • 항목에는react-devotool
    • 이 첨부되어 있다
    탐색
  • (검색 매개 변수에 devtools 추가)http://localhost:8081/vr/?devtools 상태에서 다음 명령을 실행할 때 React Developer tools가 상승
    • $ yarn devtools
  • 조회 파라미터를 설정하지 않으면 다음 메시지를 보낼 때 이동하지 않습니다

    • 테스트

  • Jest를 통해 아래 명령을 통해 테스트
    • $ yarn test
  • 처음부터 다음 테스트 파일이 있습니다(index-test.js)
    테스트 대상은 index입니다.vr.js
    • __test__/index-test.js
    import 'react-native';
import 'react-vr';
import React from 'react';
import Index from '../index.vr.js';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer.create(
    <Index />
  );
});
  • 예를 들어 WelcommeToVR의 가장 바깥쪽은 View Component이기 때문에 테스트에서 아래의 내용을 보충하면 추가 테스트를 실시할 수 있다
    • diff --git a/__tests__/index-test.js b/__tests__/index-test.js
index 8ffc333..27de2b0 100644
--- a/__tests__/index-test.js
+++ b/__tests__/index-test.js
@@ -11,3 +11,12 @@ it('renders correctly', () => {
     <Index />
   );
 });
+
+it('外側のコンポーネントは View', () => {
+  const tree = renderer.create(
+    <Index />
+  );
+
+  const instance = tree.toJSON();
+  expect(instance.type).toBe('View');
+});

    총결산


    VR을 들으면 어려운 일을 할 필요가 있다고 생각했는데 리액트 VR을 사용하면 바로 작동할 수 있고 Devtools와 테스트가 곁들여져 있어 도입 문턱이 낮았다.
    이번에는 소스 코드를 거의 만들어 본 적이 없어서 조금만 만져보면 즐거울 거예요.
    내일 우리 회사 CTO에어 엔지니어가 등장합니다!놓치지 마세요!

    참고 문헌

  • https://github.com/facebook/react-vr
  • https://facebook.github.io/react-vr/docs/dev-tools.html
  • https://reactjs.org/docs/test-renderer.html
    • React 노트5
    Beetle.Redis의 List 및 MapSet 객체

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage