3차원 웹 VR 모드, 모바일로 보는 딴 세상 - 26번째 시간

요새 VR 이다 해서 가상세계와 가상현실이 각광받는 듯 합니다.

물론 아직은 컨텐츠의 부족으로 가뭄을 겪고 있는듯 하지만,

5G 모바일 통신체계가 자리잡히고 모바일 기기의 성능이 점점 좋아짐에 따라

컨텐츠 더욱 제작도 쉬워지겠지요.

모바일웹에서 사용하는 HTML5 웹표준 기술은 이미 이런 기술을 위한 준비를 몇년전부터 해왔고, 현 시대에는 표준화하여 대부분의 브라우저에서 이미 지원되고 있습니다.

영상 한번 보실까요? 앞 부분은 PC 웹이고, 뒷부분은 모바일웹입니다.

​

https://youtu.be/VJZPewzuf5w

이번 시간에는 지난 주에 이어, VR 모드를 추가하는 부분을 다뤄보도록 하겠습니다.

미리보기를 원하시는 분은 아래 URL 로 접속하시면 작동화면을 보실 수 있지요.

http://dreamplan7.cafe24.com/canvas2/three014.html

3차원웹 캔버스

다만, 자이로 센서라는게 없거나 브라우저에 연결이 안된 모바일 기기나 웹브라우저에서는 작동이 안되는 것 같습니다.

안드로이드에서는 되도록 인터넷 브라우저란걸로 열어서 봐야 잘 작동하는데,

아이폰은 어떤지는 모르겠습니다. 잘 되시는 분 제보 주시면 감사하겠습니다 :)

​

아울러 지난 전체강좌는 아래 URL 에서 확인하실 수 있습니다.

https://itadventure.tistory.com/category/%EC%BD%94%EB%94%A9%EA%B3%BC%20%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98

'코딩과 알고리즘' 카테고리의 글 목록

---

자, 그럼 시작할까요?

지난 소스 유지를 위해 서버에서 three013.html 파일을 three014.html 파일로 복사하고, js/three013.js 파일은 three014.js 파일로 복사해 주세요.

​

그리고 three014.html 파일에서 아래 소스 부분을

<script src="js/three013.js"></script>

이렇게 바꿔 주시면 되겠습니다.

<script src="js/three014.js"></script>

이 것으로 준비는 끝!

​

먼저 체크상자를 만들어 VR 모드와 일반 모드를 왔다리 갔다리 할 수 있도록 하였는데요.

VR 전용 페이지를 만들면 PC에서 볼 수가 없기 때문에,

체크상자를 두어서 자유롭게 전환할 수 있게 하였습니다.

다만 일반모드와 달리, VR 모드에서는 1인칭 주인공 시점으로 보게 됩니다.

그래서 내가 중심이 되어 현 위치에서 주위를 둘러보는 형태가 된다는 점 알아두세요.

​

게임을 즐기시는 분이라면, '앗, ftp 전투 게임을 만들면 좋겠다' 생각하실지 모르지만 크레이는 평화주의인지라 저를 통해 기대하지는 말아 주세요 :)

​

우선, three.js 에는 VR모드를 위한 전용 스크립트가 이미 준비되어 있습니다.

바로 DeviceOrientationControls.js 라는 기능인데요.

전에 OrbitControls.js 기능을 카메라 오브젝트에 연결하여 마우스 제어로 다룰 수 있도록 한 적이 있었지요?

​

그와 똑같습니다.

그냥 DeviceOrientationControls.js 를 카메라 오브젝트에 연결만 하면,

모바일 기기가 향하는 방향을 바라보도록 되어 있습니다.

​

관련 스크립트를 한번 살펴볼까요?

​

카메라 제어하는 부분은 js/LoadCamera2.js 파일입니다.

여기서 컨트롤러 소스를 연결하는 부분을 아래와 같이 바꿔주면 되는데요.

var controls = new THREE.DeviceOrientationControls (camera, renderer.domElement);
	control2.minPolarAngle = Math.PI / -2;
	control2.maxPolarAngle = Math.PI / 2.1;

이 컨트롤러 사용을 위해서는 아래 컨트롤러 파일이 먼저 서버에 업로드되어 있어야 합니다. 압축을 풀어서 js 폴더에 업로드 해주세요.

DeviceOrientationControls.zip

0.00MB

이 것으로 사실 끝입니다. 모바일 기기 '인터넷 브라우저'에서 접속하면 모바일 기기가 향하는 방향의 각도에 따라 딴 세상이 보이실 겁니다.

근데 문제가 하나 있지요.

이 기능은 자이로 센서라고 해서 드론처럼 모바일 스마트폰의 균형잡는 부품이 있어서 이렇게 볼 수 있지만 PC는 자이로 센서가 없지요.

​

만일 자이로 센서가 있더라도 PC를 이리 저리 들고서 돌려보려면,

아휴~ 힘들지 않겠습니까? :)

그래서 고안한게 PC버전과 VR버전 2가지를 가지고 돌려 보는 겁니다.

이를 위해 카메라 소스를 아래와 같이 개조했는데요.

원래 소스를 손대지 않기 위해, js/LoadCamera2.js 파일명으로 저장해 주시기 바랍니다.

// 카메라 ( 카메라 수직 시야 각도, 가로세로 종횡비율, 시야거리 시작지점, 시야거리 끝지점
var camera = new THREE.PerspectiveCamera( 50, window.innerWidth/window.innerHeight, 1, 20000 );
	camera.position.set ( 25, 5, 3 );

// 카메라 컨트롤러
var control1 = new THREE.OrbitControls (camera, renderer.domElement);
	control1.minPolarAngle = Math.PI / -2;
	control1.maxPolarAngle = Math.PI / 2.1;
  control1.enableDamping = true;
  control1.dampingFactor = 0.1;


// 카메라 컨트롤러
var control2 = new THREE.DeviceOrientationControls (camera, renderer.domElement);
	control2.minPolarAngle = Math.PI / -2;
	control2.maxPolarAngle = Math.PI / 2.1;

// 카메라 컨트롤러
var controls = control1;

function changeVRMode()
{
	var val=document.getElementById('vrMode').checked;
	if(val==true)controls=control2;
	else controls=control1;
}

원리는 PC 버전의 마우스 조작에 따라 움직이는 컨트롤러를 control1 로 정의하고,

var control1 = new THREE.OrbitControls (camera, renderer.domElement);

모바일 방향에 따라 움직이는 컨트롤러를 control2로 정의한 다음,

var control2 = new THREE.DeviceOrientationControls (camera, renderer.domElement);

실제 사용할 컨트롤러 변수 controls 를 이쪽을 사용했다가 저쪽을 사용했다 하는 식으로 바꿔 치기 하는 겁니다.

처음에는 우선 컨트롤러1 번으로 정의해 놓고,

var controls = control1;

체크 상자를 체크하면 바뀌는 부분을 함수로 만들어 놓는 것이지요.

이 함수는 id값이 vrMode 인 체크상자의 체크여부에 따라 컨트롤러 1번을 사용하거나 또는 2번을 사용하도록 하는 함수입니다.

function changeVRMode()
{
	var val=document.getElementById('vrMode').checked;
	if(val==true)controls=control2;
	else controls=control1;
}

카메라 스크립트가 변경되었기 때문에, three014.html 파일에서도 아래 소스 부분이

<script src="js/LoadCamera.js"></script>

이렇게 변경되었습니다.

<script src="js/LoadCamera2.js"></script>

VR 체크상자도 화면에 추가되어야겠지요?

둘러보기 소스의 아랫 부분에.

<div id=button4 class=button onclick="aroundCam()">둘러보기</div>

아래 소스가 추가되었습니다. 체크상자를 체크하면 카메라 모드가 왔다 갔다 하는 거지요.

<div id=DivChk>
	<label><input id='vrMode' type=checkbox style='width:105px;height:105px;' onchange="changeVRMode()"><br/>VR</label>
</div>

아울러 체크상자의 css 스타일 태그 또한

<style> 태그 안쪽에 추가되었습니다.

#divChk {
	position: fixed;
	top: 0;
	right: 0;
	color:white;
	padding:5px;
	text-align:right;
	font-size:25pt;
}

이것으로 완성인데요. 소스가 그동안 좀 많이 바뀌었기 때문에 전체 소스를 다운받을 수 있게 첨부하니 참조해 주세요 :)

canvas2.zip

0.68MB

여기까지 읽어주시느라 수고하셨습니다.

감사합니다.

 

NEXT LECTURE ! / https://itadventure.tistory.com/68

3차원 웹, 오우~ 돌핀! - 27번째 시간