React-360

새로운 프로젝트를 위헤서 웹에서 3D렌더링을 할 수 있는 방안을 찾고 있는 중에 

페이스북에서 소개한 React 360에 알게 되었고 좀더 심플한 프로젝트를 React로 할 수 있게 되어서

스터디겸 소개를 하려고한다.

 

일단 공식문서는 아래에 링크를 참조할 수 있다

https://facebook.github.io/react-360/

React 360 · Create amazing 360 experiences



React360은 Cross Platform을지원해서 데스크탑, 모바일, VR로 제공가능하다.

React360을 돌리기 위해서는 먼저 Node.js가 필요하다(React 프로젝트를 진행할 때도 필요)

 

React360 프로젝트를 만들기 위한 툴로 React360 CLI를 아래의 명령어로 먼저 설치해야한다.

npm install -g react-360-cli

 

프로젝트를 생성하기 위해서는 아래의 명령어를 사용한다. Hello360은 프로젝트명이므로 해당 위치에는 프로젝트의

이름을 넣으면된다.

react-360 init Hello360

 

프로젝트 생성 후, 프로젝트에 들어가서 npm start 명령어로 실행을 시키면된다.

npm start

 

react 360을 빌드할 때는 React Native와 마찬가지로 페이스북에서 제공하는 Metro 라는 JS 번들러를 사용한다. 

 

브라우저를 열고 http://localhost:8081/index.html 으로 들어가면 메인화면에서 제공하는 별과 산, Welcome to React 360이라는 패널이 있는화면이 나타난다.

 

참고*)

터미널에서 npm start를 하면 실행이 되는데 VSCode에서 실행을 하려고하니까 실행이 안되는 현상이 있었다.

이유는 찾아봐야겠지만 서버를 실행할때는 터미널을 꼭 켜서 거기에서 npm start를 할 필요가 있다!