소개

세부도 모쿠모쿠회 속에서 초학자를 대상으로 한 VR 개발 입문 강의를 실시했습니다.
환경 구축에서 파노라마 이미지를 표시할 때까지의 절차를 여기에 남겨 둡니다.

할 일

제목대로입니다.
다만, 각 용어의 해설은 하지 않습니다. 절차 전용입니다.
양해 바랍니다.

React 360은?

Facebook사제의 VR전용 어플리케이션 프레임워크입니다.
사실 React를 쓰는 방법으로 VR 앱도 개발할 수 있습니다!
htps : // 펑세보오 k. 기주 b. 이오/레아ct-360/

개발 환경(필자의 환경입니다.)

macOS Mojave 10.14.5

Node.js 12.6

npm 6.9

Node.js 설치 방법은 여기에서.
htps : // 코 m / 아오 소메 아

필요한 도구는 여기에서.

iterm2

Homebrew

개발환경 정돈

react-360-cli 설치

htps : // 펑세보오 k. 기주 b. 이오/레아ct-360/도cs/세트 p. HTML
공식 문서를 참고로 개발 환경을 구축하겠습니다.

npm을 사용하여 react-360-cli를 설치합니다.

$ npm install -g react-360-cli

앱 시작

아래 명령을 치면 폴더가 생성됩니다.

$ react-360 init Hello360
Creating new React 360 project...
Project directory created at Hello360

~省略~

success Saved lockfile.
✨  Done in 21.60s.
Done!
  Now enter the new project directory by running `cd Hello360`
  Run `npm start` to initialize the development server
  From there, browse to http://localhost:8081/index.html
  Open `index.js` to begin editing your app.

$ ls
Hello360

위의 지시에 따라 Hello360으로 이동하여 npm start를 실행하십시오.

$ cd Hello360
$ npm start

http://localhost:8081/index.html
위 URL을 방문해 봅시다. 로드에 시간이 걸린다고 생각합니다만, 잠시 후 아래와 같은 표시가 나올까 생각합니다.

Welcome to React 360에서 Hello World로 바꿔보세요. (index.js)

편집기를 엽니다.index.js 를 열면 아래가 기재되어 있을까 생각합니다.

index.js

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-360';

export default class Hello360 extends React.Component {
  render() {
    return (
      <View style={styles.panel}>
        <View style={styles.greetingBox}>
          <Text style={styles.greeting}>
            Welcome to React 360
          </Text>
        </View>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  panel: {
    // Fill the entire surface
    width: 1000,
    height: 600,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  greetingBox: {
    padding: 20,
    backgroundColor: '#000000',
    borderColor: '#639dda',
    borderWidth: 2,
  },
  greeting: {
    fontSize: 30,
  },
});

AppRegistry.registerComponent('Hello360', () => Hello360);

여기서 15행Welcome to React 360를 Hello World로 다시 씁니다.
파일을 저장하고 브라우저를 업데이트하세요.
아래와 같이 표시되면 성공입니다!

파노라마 이미지를 표시합니다.

파노라마 이미지의 프리 소재이지만, 나는 아래 URL에서 다운로드했습니다.
h tp // 파노로만. 또한 3. 네 t/

다운로드한 후 static_assets 폴더 아래로 이동합니다.
이름도 바꾸자.
※이번은 p1.jpg 로 진행해 갑니다.

배경 이미지를 변경할 때 client.js 파일을 편집합니다.

client.js

// This file contains the boilerplate to execute your React app.
// If you want to modify your application's content, start in "index.js"

import {ReactInstance} from 'react-360-web';

function init(bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    // Add custom options here
    fullScreen: true,
    ...options,
  });

  // Render your app content to the default cylinder surface
  r360.renderToSurface(
    r360.createRoot('Hello360', { /* initial props */ }),
    r360.getDefaultSurface()
  );

  // Load the initial environment
  r360.compositor.setBackground(r360.getAssetURL('360_world.jpg'));
}

window.React360 = {init};

20행에

  r360.compositor.setBackground(r360.getAssetURL('360_world.jpg'));

이 360_world.jpg를 방금 다운로드 한 파일 이름으로 다시 씁니다.
이번은 p1.jpg 로 변경합니다.
저장하고 브라우저를 업데이트하세요.
아래와 같은 표시가 되면 성공입니다!
마우스로 글리그리 움직이자.

마지막으로

해설을 원하는 분은 아래의 기사를 추천합니다.
htps : // 코 m / 시루코 / ms / 3에 77 바베 80 아 373c71fd5
htps : // 이 m / 바라 어 ~ chb ぉ g / ms / 46531 0064 1c0d181