도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

ReactVR 배우기 #1

* 우선, 이 글은 ReactVR을 Step by Step으로 기술하기보다는 중요한 것, 유용한 것들의 메모위주로서 쓰려고 합니다. Step by Step으로 배우시려먼 아래의 링크로 가셔서 보시면 될 것 같습니다. 저도 아래의 Tutorial을 보고 배우는데 두분다 상당히 자세히 작성되어 있습니다.  

  * Michael Mangialardi의 Medium글

  * Design PH의 YouTube동영상 강의  



1. Live-reloading 같은 기능 설정하기   

나는 굉장히 시각적인 사람이라 그런지 보통 코딩을 하면서 내가 바꾼 코드가 실제로 어떻게 보여지는지 바로바로 보는것을 선호한다. 그래서 서브라임 텍스트로 개발 할 때에 항상 Live-reloading 플러그인을 깔고 거의 항상 켜두어 확인하며 작성하는 편이다.

근데, ReactVR에서는 딱 코드 한줄만 삽입하면 Live-reloading 플러그인 필요없이 그와 같은 기능을 사용 할 수 있다!

처음 $react-vr init "프로젝트이름" 명령어을 이용하여 ReactVR를 깔게 되면 여러 폴더들과 모듈들을 설치하게 되는데 그중에 vr폴더안의 client.js파일에

enableHotReload: true,

요 딱 한줄을 적어주게 되면 코드를 고칠 때 마다 바로바로 업데이트되어 보여주게 된다.  


이 기능은 왠지 React 단에서 제공하는 코드같은데, 나.. 이 기능.. 애정한다..



2. 360카메라로 찍은 사진 보정하기.

우선 내가 만드려고 하는 프로젝트에서 360사진이 필요하다. 360사진을 만드는 방법은 여러가지 방법이 있겠으나 역시 360카메라로 찍는방법이 제일 편한것 같다. 360 카메라를 살펴보니까 LG 360카메라가 스펙상 꽤 쓸만해 보이면서도 꽤나 저렴한 가격에 판매되고 있어 그걸로 구매했다. 그리고 사진을 찍었는데, 360 촬영 특성상 '나'를 숨길 방법이 없었다.. 그렇다고 삼각대에 세워놓고 어디 숨어서 찍기도 좀 뭐하고.. 그렇게 찍어도 어차피 삼각대가 또 찍힐테니까.. 그래서 보정을 해보기로 한다.

우선 원본사진이다.


보다시피 사진 하단부에 나와 내 그림자가 찍혀있다. 그대로 사용해도 대부분의 장면에서 크게 해치진 않치만, 그래도 깔끔하게 찍은사람이 없는게 낫지않을까 싶다. 보통 하단부분을 로고로 가리기도 하고 하지만 로고보다는 그냥 없는듯하게 만들기 위해 포토샵으로 가져가본다.

우선 사진을 포토샵에 가져가서 180도 돌려준다. (그래야만 필터를 적용했을때 가운데에 내가 오기에)

그리고 난 후 Filter - Distort - Polar Coordinates을 적용시켜준다.


그리고


Rectangular to Polar가 선택되어있는지 확인하고 OK를 눌러준다.

그러고 도장툴과 힐링툴을 적절하게 사용하여 가운데를 이쁘게 잘 지워주면 된다.

그러고 난 후 다시 같은 필터를 적용시켜 이번에는 역순으로 Polar to Rectangular를 선택하고 적용시킨후 180도를 다시 돌려주면 이렇게 Boilerplate(보일러의 그 보일러 맞다. 이런식으로 펴진 사진형식을 보일러판때기같다고 그렇게 부르더라..) 360사진이 준비되게 된다.



3. 360포토 뷰어

이제 리액트VR의 파워를 드디어 쓸때가 되었다.

간단하게 360Photo를 웹브라우저상에서 보기위해서 Three.js에서는 그래도 간단하긴 하지만 몇줄을 써줘야 된다. 하지만 ReactVR에서는 미리 만들어진 템플릿에서 이미 테그를 써서 360포토가 만들어져있으므로 위에서 준비한 우리의 360포토를 static_assets폴더에 넣고 링크만 시켜주면 되겠다.

<Pano source={asset('WashingtonSquarePark360.jpg')}/>

그러고 쓸데없는 텍스트는 지워주면 되겠다. 또는 텍스트를 바꿔서 남겨둬도 뭐... 아무튼 아주 간단하게 360포토앱 끝!



리뷰