모두의연구소 가상현실연구실 VRtooN에서 진행한 연구결과물입니다.

작성자 : 박민수 랩짱님


* Three.js (http://threejs.org/)

Three.js 는 웹브라우저 상에서 2D,3D 컴퓨터 그래픽을 만들고 움직이게 할 수 있는 오픈소스 Javascript library/API 이다. 소스코드는 https://github.com/mrdoob/three.js/ 에서 관리되고 있다.


* 필요한 Three.js 라이브러리들

라이브러리들은 github에서 받아 작업 폴더에 넣고, <script src="경로/해당파일명“></script> 의 형식으로 <body> 태그 내에 포함시킨다.

- three.js : 기본 three.js 라이브러리

- StereoEffect.js : VR Stereo 효과를 위한 라이브러리

- DeviceOrientationControls.js : 모바일 기기의 브라우저를 사용했을 때, 기기의 회전 정보를 이용해 카메라, 즉 카드보드 사용자의 머리 움직임과 일치시켜주는 역할을 하는 라이브러리

- OrbitControls.js : 데스크탑 브라우저로 테스트할 때, 터치나 마우스로 카메라를 회전시켜주는 역할을 하는 라이브러리


* Three.js를 이용해서 3D 공간을 구성하기 위한 기본 형식

- 필요한 변수 선언

- init 함수 정의

- 카메라 생성

- Scene 생성

- WebGL Renderer 생성

- Stereo Effect 생성해서 Renderer 와 연결

- Light 생성 및 Scene 에 넣기

- 메쉬 생성 (Sphere Geometry + LambertMaterial) Scene 에 넣기

- ArrowHelper, AxisHelper, GridHelper 생성 및 Scene 에 넣기

- OrbitControls 생성 및 camera, renderer 와 연결

- DeviceOrientationControls 생성 및 camera 와 연결

- animate 함수 정의

- requestAnimationFrame(animate)를 사용해서 반복 호출되도록 한다.

- camera.aspect를 화면 width, height 에 맞춰 비율을 업데이트

- renderer 의 크기도 width, height 에 맞춘다.

- stereo effect 의 크기도 width, height 에 맞춘다.

- camera Projection Matrix update

- device orientation update

- init 함수 호출

- animate 함수 호출


이와 같이 코드를 구성하여 데스크탑 브라우저 및 모바일 브라우저에서 좌표계를 확인할 수 있다.




그림 1. 데스크탑 브라우저 화면





그림 2. 모바일 브라우저



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

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

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



저작자 표시 비영리 변경 금지
신고

+ Recent posts