박민수

모두의연구소 가상현실연구실 <VRtooN> 랩짱


모두의연구소 페이지와 커뮤니티 그룹에 오시면 더 많은 정보를 만나보실 수 있습니다.

모두의연구소 페이지 https://www.facebook.com/lab4all

모두의연구소 커뮤니티 그룹 : https://www.facebook.com/groups/modulabs


* Brackets

Brackets (http://brackets.io/) Adobe에서 개발 중인 HTML/CSS/Javascript를 위한 오픈소스 개발툴이다. 비슷한 다른 오픈소스 툴들(sublime text, atom, visual studio code )과 비교했을 때, ‘Inline Editors' ’Live Preview' 기능 등으로 인해 코드 수정, 확인이 용이하다. 이 기능을 이용해 웹브라우저에서 VR을 개발할 때 현재 작성한 코드가 의도한대로 동작하는 지 바로 확인할 수 있다.

* Brackets 설치 및 작업폴더 생성

Brackets 사이트 (http://brackets.io/) 에 있는 링크에서 다운로드, 설치, 실행.

파일 > 폴더열기 를 클릭해서 New Folder 로 작업할 폴더 이름을 입력하고 Open을 눌러 해당 폴더를 연다.

왼쪽의 작업 폴더에서 오른쪽 마우스 버튼을 눌러 파일 만들기를 클릭하여 index.html을 만든다.



BracketsLive Preview 버튼을 눌러 웹브라우저로 확인한다.



이 상태에서 웹브라우저를 닫지 않고, 다시 Brackets 로 돌아가 TESTTEST EDIT으로 바꾸면 웹브라우저에서 실시간으로 내용이 바뀌는 것을 확인할 수 있다.

 

* 모바일 브라우저에서 확인

카드보드에 스마트폰을 넣어 VR로 보기 위해서는 모바일 브라우저에서 방금 작성한 코드의 결과를 확인할 수 있어야 한다.

이를 위해, 터미널(윈도우는 cmd )을 열어 해당 폴더로 이동한다.

파이썬을 사용해서 http server를 실행시킨다. (참고: https://www.python.org/downloads/)

python 2.x 인 경우:

python -m SimpleHTTPServer 8000

: https://docs.python.org/2/library/simplehttpserver.html

python 3.x 인 경우:

python -m http.server 8000

: https://docs.python.org/3/library/http.server.html

 

노트북(데스크탑)IP 주소 확인

윈도우의 경우: cmd 창 하나 더 띄워서 ipconfig [엔터] : 나오는 목록 중에서 IPv4 주소

mac osx 의 경우: terminal 창 하나 더 띄우거나 tab 을 띄워 ifconfig [엔터] : 나오는 목록 중에서 inet

폰이 노트북과 같은 AP 에 접속되어 있는 지 확인.

폰 웹브라우저 실행: 주소창에 입력(x는 위에서 확인한 노트북(데스크탑)IP 주소) : xxx.xxx.xxx.xxx:8000/index.html from_mobile_chrome



참고로 이렇게 실행시킨 http server 는 터미널 창에서 control(Ctrl)+c 를 두 번 누르면 종료된다.

 

이와 같은 방식을 사용해 앞으로 사용하게 될 Three.js 라이브러리를 활용해서, Brackets로 웹브라우저 상에 VR 개발을 하고, Live Preview 로 확인하며, 동시에 모바일 브라우저에서 확인하는 방식으로 환경을 구축할 수 있다.

저작자 표시 비영리 변경 금지
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

+ Recent posts