실시간 기기 간 미리 보기로 가상 현실 모델을 구축하는 방법

게시 됨: 2022-03-10

빠른 요약 ↬ 이 튜토리얼에서는 3차원 개체를 프로그래밍하고 이러한 개체에 간단한 상호 작용을 추가합니다. 또한 클라이언트와 서버 간에 간단한 메시지 전달 시스템을 구축하는 방법을 배울 수 있습니다.

가상 현실(VR)은 컴퓨터 생성 환경을 기반으로 하는 경험입니다. 다양한 VR 제품이 헤드라인을 장식하고 그 적용 범위가 매우 광범위합니다. 동계 올림픽의 경우 미국 팀은 가상 현실을 운동 훈련에 활용했습니다. 외과 의사들은 의료 훈련을 위해 가상 현실을 실험하고 있습니다. 그리고 가장 일반적으로 가상 현실이 게임에 적용되고 있습니다.

우리는 애플리케이션의 마지막 범주에 초점을 맞출 것이며 특히 포인트 앤 클릭 어드벤처 게임 에 초점을 맞출 것입니다. 이러한 게임은 캐주얼 게임입니다. 목표는 장면의 개체를 가리키고 클릭하여 퍼즐을 완성하는 것입니다. 이 튜토리얼에서는 그러한 게임의 간단한 버전을 가상 현실에서 만들 것입니다. 이것은 3차원 프로그래밍에 대한 소개 역할을 하며 웹에 가상 현실 모델을 배포하기 위한 독립적인 시작 가이드입니다. 사용자는 VR에서 게임을 플레이할 수 있고 VR 헤드셋이 없는 사용자는 여전히 전화기나 데스크탑에서 게임을 할 수 있는 이중 이점을 제공하는 프레임워크인 webVR을 사용하여 구축합니다.

가상 현실을 위한 개발

오늘날 모든 개발자는 VR용 콘텐츠를 만들 수 있습니다. VR 개발을 더 잘 이해하려면 데모 프로젝트를 진행하는 것이 도움이 될 수 있습니다. 관련 기사 읽기 →

이 튜토리얼의 후반부에서는 데스크탑용 "미러"를 구축합니다. 즉, 플레이어가 모바일 장치에서 수행하는 모든 움직임이 데스크톱 미리보기에서 미러링됩니다. 이를 통해 플레이어가 보는 것을 볼 수 있으므로 안내를 제공하거나 게임을 녹화하거나 단순히 손님을 즐겁게 할 수 있습니다.

전제 조건

시작하려면 다음이 필요합니다. 이 튜토리얼의 후반부에는 Mac OSX가 필요합니다. 코드는 모든 플랫폼에 적용할 수 있지만 아래 종속성 설치 지침은 Mac용입니다.

특히 glitch.com에 대한 인터넷 액세스;
가상 현실 헤드셋(옵션, 권장). 저는 개당 15달러에 제공되는 Google Cardboard를 사용합니다.

점프 후 더! 아래에서 계속 읽기 ↓

1단계: 가상 현실(VR) 모델 설정

이 단계에서는 단일 정적 HTML 페이지로 웹사이트를 설정합니다. 이를 통해 데스크톱에서 코딩하고 웹에 자동으로 배포할 수 있습니다. 그런 다음 배포된 웹 사이트를 휴대폰에 로드하고 VR 헤드셋 안에 배치할 수 있습니다. 또는 배포된 웹 사이트를 독립 실행형 VR 헤드셋으로 로드할 수 있습니다. glitch.com으로 이동하여 시작하십시오. 그 다음에,

오른쪽 상단의 "새 프로젝트"를 클릭합니다.
드롭다운에서 "hello-express"를 클릭합니다.

그런 다음 왼쪽 사이드바에서 views/index.html 을 클릭합니다. 우리는 이것을 귀하의 "편집자"라고 부를 것입니다.

다음 단계는 왼쪽 사이드바에 있는 views/index.html을 클릭하는 것입니다. 이를 "편집기"라고 합니다. — (큰 미리보기)

웹 페이지를 미리 보려면 왼쪽 상단의 "미리보기"를 클릭하십시오. 이것을 미리보기 라고 합니다. 편집기의 모든 변경 사항은 버그 또는 지원되지 않는 브라우저를 제외하고 이 미리 보기에 자동으로 반영됩니다.

웹 페이지를 미리 보려면 왼쪽 상단의 "미리보기"를 클릭하십시오. 이것을 미리보기라고 부를 것입니다. 편집기의 모든 변경 사항은 버그 또는 지원되지 않는 브라우저를 제외하고 이 미리 보기에 자동으로 반영됩니다. — (큰 미리보기)

편집기로 돌아가서 현재 HTML을 VR 모델에 대한 다음 상용구로 바꿉니다.

 <!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <!-- blue sky --> <a-sky color="#a3d0ed"></a-sky> <!-- camera with wasd and panning controls --> <a-entity camera look-controls wasd-controls position="0 0.5 2" rotation="0 0 0"></a-entity> <!-- brown ground --> <a-box shadow shadow="receive:true" color="#847452" width="10" height="0.1" depth="10"></a-box> <!-- start code here --> <!-- end code here --> </a-scene> </body> </html>

탐색은 다음을 참조하십시오.

미리 보기로 돌아가면 배경색이 파란색과 갈색으로 표시됩니다. — (큰 미리보기)

VR 헤드셋에서 이를 미리 보려면 옴니바의 URL을 사용하십시오. 위 사진에서 URL은 https://point-and-click-vr-game.glitch.me/ 입니다. 이제 작업 환경이 설정되었습니다. 이 URL을 가족 및 친구와 자유롭게 공유하십시오. 다음 단계에서는 가상 현실 모델을 만듭니다.

2단계: 트리 모델 구축

이제 aframe.io의 프리미티브 를 사용하여 트리를 생성합니다. Aframe이 사용하기 쉽도록 미리 프로그래밍한 표준 개체입니다. 특히 Aframe은 개체를 개체 로 참조합니다. 토론을 구성하기 위해 모든 엔터티와 관련된 세 가지 개념이 있습니다.

기하학과 재료,
변환 축,
상대 변환.

첫째, 기하학 과 재료 는 코드에서 모든 3차원 개체의 두 가지 빌딩 블록입니다. 기하학은 정육면체, 구, 피라미드 등의 "모양"을 정의합니다. 재료는 색상, 반사도, 거칠기와 같은 모양의 정적 속성을 정의합니다.

Aframe은 <a-box> , <a-sphere> , <a-cylinder> 등과 같은 기본 요소를 정의하여 이 개념을 단순화하여 지오메트리 및 해당 재료의 사양을 더 간단하게 만듭니다. 녹색 구를 정의하여 시작합니다. 코드의 19번째 줄에서  바로 뒤에 다음을 추가합니다.

 <!-- start code here --> <a-sphere color="green" radius="0.5"></a-sphere> <!-- new line --> <!-- end code here -->

둘째, 객체를 변형 할 세 개의 축이 있습니다. x 축은 수평으로 진행되며 오른쪽으로 이동할 때 x 값이 증가합니다. y 축은 수직으로 진행되며 위로 이동하면 y 값이 증가합니다. z 축은 화면 밖으로 나가며, z 값은 사용자 쪽으로 이동함에 따라 증가합니다. 이 세 축을 따라 엔티티를 변환, 회전 또는 크기 조정할 수 있습니다.

예를 들어, 개체를 "오른쪽"으로 번역하려면 해당 x 값을 늘립니다. 꼭대기처럼 물체를 회전시키려면 y축을 따라 회전시킵니다. 19행을 수정하여 구를 "위로" 이동합니다. 이는 구의 y 값을 늘려야 함을 의미합니다. 모든 변환은 <x> <y> <z> 로 지정됩니다. 즉, y 값을 늘리려면 두 번째 값을 늘려야 합니다. 기본적으로 모든 개체는 위치 0, 0, 0에 있습니다. 아래에 position 지정을 추가하십시오.

 <!-- start code here --> <a-sphere color="green" radius="0.5" position="0 1 0"></a-sphere> <!-- edited line --> <!-- end code here -->

셋째, 모든 변환은 상위에 상대적 입니다. 나무에 줄기를 추가하려면 위의 구 내부에 원통을 추가하십시오. 이렇게 하면 몸통의 위치가 구의 위치를 기준으로 합니다. 본질적으로 이것은 나무를 하나의 단위로 유지합니다. <a-sphere ...> 및 </a-sphere> 태그 사이에 <a-cylinder> 엔터티를 추가합니다.

 <a-sphere color="green" radius="0.5" position="0 1 0"> <a-cylinder color="#84651e" position="0 -0.9 0" radius="0.05"></a-cylinder> <!-- new line --> </a-sphere>

이 나무가 없는 베어본을 만들려면 두 개의 녹색 구체 형태로 더 많은 단풍을 추가하십시오.

 <a-sphere color="green" radius="0.5" position="0 0.75 0"> <a-cylinder color="#84651e" position="0 -0.9 0" radius="0.05"></a-cylinder> <a-sphere color="green" radius="0.35" position="0 0.5 0"></a-sphere> <!-- new line --> <a-sphere color="green" radius="0.2" position="0 0.8 0"></a-sphere> <!-- new line --> </a-sphere>

미리보기로 돌아가면 다음 트리가 표시됩니다.

미리 보기로 돌아가면 이제 배경에 배치된 녹색 나무를 볼 수 있습니다. — (큰 미리보기)

VR 헤드셋에서 웹사이트 미리보기를 새로고침하고 새 트리를 확인하세요. 다음 섹션에서는 이 트리를 대화형으로 만들 것입니다.

3단계: 모델에 클릭 상호작용 추가

엔터티를 대화형으로 만들려면 다음을 수행해야 합니다.

애니메이션을 추가하고,
이 애니메이션을 클릭하면 트리거합니다.

최종 사용자는 가상 현실 헤드셋을 사용하기 때문에 클릭은 응시하는 것과 같습니다. 즉, 대상을 응시하여 "클릭"합니다. 이러한 변경 사항을 적용하려면 커서로 시작합니다. 13행을 다음으로 교체하여 카메라를 재정의합니다.

 <a-entity camera look-controls wasd-controls position="0 0.5 2" rotation="0 0 0"> <a-entity cursor="fuse: true; fuseTimeout: 250" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat" scale="0.5 0.5 0.5" raycaster="far: 20; interval: 1000; objects: .clickable"> <!-- add animation here --> </a-entity> </a-entity>

위의 내용은 클릭 동작을 트리거할 수 있는 커서를 추가합니다. objects: .clickable 속성에 유의하십시오. 즉, "clickable" 클래스가 있는 모든 개체는 애니메이션을 트리거하고 적절한 위치에서 "click" 명령을 받습니다. 또한 클릭 커서에 애니메이션을 추가하여 커서가 클릭을 트리거할 때 사용자가 알 수 있도록 합니다. 여기에서 커서는 클릭 가능한 개체를 가리킬 때 천천히 축소되고 개체가 클릭되었음을 나타내기 위해 1초 후에 스냅됩니다.  주석을 다음 코드로 바꿉니다.

 <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="backwards" from="1 1 1" to="0.2 0.2 0.2" dur="250"></a-animation>

트리를 2단위 오른쪽으로 이동하고 29행을 다음과 일치하도록 수정하여 트리에 "clickable" 클래스를 추가합니다.

 <a-sphere color="green" radius="0.5" position="2 0.75 0" class="clickable">

다음으로 수행할 작업:

애니메이션을 지정하고,
클릭으로 애니메이션을 트리거합니다.

Aframe의 사용하기 쉬운 애니메이션 개체로 인해 두 단계를 빠르게 연속으로 수행할 수 있습니다.

<a-cylinder> 태그 바로 뒤에 있지만 </a-sphere> 가 끝나기 전에 33행에 <a-animation> 태그를 추가합니다.

 <a-animation begin="click" attribute="position" from="2 0.75 0" to="2.2 0.75 0" fill="both" direction="alternate" repeat="1"></a-animation>

위의 속성은 애니메이션에 대한 여러 구성을 지정합니다. 애니메이션:

click 이벤트에 의해 트리거됩니다.
나무의 position 수정합니다
원래 위치에서 시작 2 0.75 0
2.2 0.75 0 으로 끝남(오른쪽으로 0.2단위 이동)
목적지를 오갈 때 움직이는 애니메이션
목적지를 오가는 여행 사이에 애니메이션을 번갈아 가며
이 애니메이션을 한 번 반복합니다. 즉, 개체는 대상으로 한 번, 원래 위치로 다시 한 번 총 두 번 애니메이션됩니다.

마지막으로 미리보기로 이동하여 커서에서 트리로 드래그합니다. 검은색 원이 나무에 놓이면 나무가 오른쪽과 뒤쪽으로 이동합니다.

이것으로 가상 현실에서 포인트 앤 클릭 어드벤처 게임을 구축하는 데 필요한 기본 사항을 마칩니다. 이 게임의 더 완전한 버전을 보고 플레이하려면 다음 짧은 장면을 참조하십시오. 임무는 장면의 다양한 개체를 클릭하여 게이트를 열고 게이트 뒤에 나무를 숨기는 것입니다.

다음으로 정적 데모를 제공하기 위해 간단한 nodeJS 서버를 설정합니다.

4단계: NodeJS 서버 설정

이 단계에서는 기존 VR 모델을 제공하는 기본적이고 기능적인 nodeJS 서버를 설정합니다. 편집기의 왼쪽 사이드바에서 package.json 을 선택합니다.

2-4 행을 삭제하여 시작하십시오.

 "//1": "describes your app and its dependencies", "//2": "https://docs.npmjs.com/files/package.json", "//3": "updating this file will download and update your packages",

이름을 mirrorvr 로 변경합니다.

 { "name": "mirrorvr", // change me "version": "0.0.1", ...

dependencies 아래에 socket.io 를 추가하십시오.

 "dependencies": { "express": "^4.16.3", "socketio": "^1.0.0", },

현재 결함과 일치하도록 저장소 URL을 업데이트하십시오. 예제 글리치 프로젝트의 이름은 point-and-click-vr-game 입니다. 글리치 프로젝트의 이름으로 바꾸십시오.

 "repository": { "url": "https://glitch.com/edit/#!/point-and-click-vr-game" },

마지막으로 "glitch" 태그를 "vr" 로 변경합니다.

 "keywords": [ "node", "vr", // change me "express" ]

이제 package.json 이 다음과 일치하는지 다시 확인하십시오.

 { "name": "mirrorvr", "version": "0.0.1", "description": "Mirror virtual reality models", "main": "server.js", "scripts": { "start": "node server.js" }, "dependencies": { "express": "^4.16.3", "socketio": "^1.0.0" }, "engines": { "node": "8.x" }, "repository": { "url": "https://glitch.com/edit/#!/point-and-click-vr-game" }, "license": "MIT", "keywords": [ "node", "vr", "express" ] }

이전 부분의 코드가 views/index.html 에서 다음과 일치하는지 다시 확인하십시오.

 <!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <!-- blue sky --> <a-sky color="#a3d0ed"></a-sky> <!-- camera with wasd and panning controls --> <a-entity camera look-controls wasd-controls position="0 0.5 2" rotation="0 0 0"> <a-entity cursor="fuse: true; fuseTimeout: 250" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat" scale="0.5 0.5 0.5" raycaster="far: 20; interval: 1000; objects: .clickable"> <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="backwards" from="1 1 1" to="0.2 0.2 0.2" dur="250"></a-animation> </a-entity> </a-entity> <!-- brown ground --> <a-box shadow shadow="receive:true" color="#847452" width="10" height="0.1" depth="10"></a-box> <!-- start code here --> <a-sphere color="green" radius="0.5" position="2 0.75 0" class="clickable"> <a-cylinder color="#84651e" position="0 -0.9 0" radius="0.05"></a-cylinder> <a-sphere color="green" radius="0.35" position="0 0.5 0"></a-sphere> <a-sphere color="green" radius="0.2" position="0 0.8 0"></a-sphere> <a-animation begin="click" attribute="position" from="2 0.75 0" to="2.2 0.75 0" fill="both" direction="alternate" repeat="1"></a-animation> </a-sphere> <!-- end code here --> </a-scene> </body> </html>

기존 server.js 를 수정합니다.

여러 NodeJS 유틸리티를 가져와 시작합니다.

표현하다
이것은 서버를 실행하는 데 사용할 웹 프레임워크입니다.
http
이를 통해 다양한 포트에서 활동을 수신 대기하는 데몬을 시작할 수 있습니다.
소켓.io
거의 실시간으로 클라이언트 측과 서버 측 사이에서 통신할 수 있게 해주는 소켓 구현입니다.

이러한 유틸리티를 가져오는 동안 ExpressJS 애플리케이션을 추가로 초기화합니다. 처음 두 줄은 이미 작성되어 있습니다.

 var express = require('express'); var app = express(); /* start new code */ var http = require('http').Server(app); var io = require('socket.io')(http); /* end new code */ // we've started you off with Express,

유틸리티가 로드되면 제공된 서버는 index.html 을 홈페이지로 반환하도록 서버에 지시합니다. 아래에 작성된 새 코드가 없습니다. 이것은 단순히 기존 소스 코드에 대한 설명입니다.

 // https://expressjs.com/en/starter/basic-routing.html app.get('/', function(request, response) { response.sendFile(__dirname + '/views/index.html'); });

마지막으로 기존 소스 코드는 달리 지정되지 않는 한 기본적으로 3000인 포트에 바인딩하고 수신하도록 애플리케이션에 지시합니다.

 // listen for requests :) var listener = app.listen(process.env.PORT, function() { console.log('Your app is listening on port ' + listener.address().port); });

편집이 끝나면 Glitch가 자동으로 서버를 다시 로드합니다. 왼쪽 상단의 "표시"를 클릭하여 응용 프로그램을 미리 봅니다.

이제 웹 응용 프로그램이 실행 중입니다. 다음으로 클라이언트에서 서버로 메시지를 보냅니다.

5단계: 클라이언트에서 서버로 정보 보내기

이 단계에서는 클라이언트를 사용하여 서버와의 연결을 초기화합니다. 클라이언트는 전화인지 데스크탑인지 서버에 추가로 알립니다. 시작하려면 views/index.html 에 곧 존재하게 될 자바스크립트 파일을 가져오세요.

4행 뒤에 새 스크립트를 포함합니다.

 <script src="/client.js" type="text/javascript"></script>

14행에서 카메라 엔터티의 속성 목록에 camera-listener 를 추가합니다.

 <a-entity camera-listener camera look-controls...> ... </a-entity>

그런 다음 왼쪽 사이드바에서 public/client.js 로 이동합니다. 이 파일에서 모든 자바스크립트 코드를 삭제합니다. 그런 다음 클라이언트가 모바일 장치인지 확인하는 유틸리티 함수를 정의합니다.

 /** * Check if client is on mobile */ function mobilecheck() { var check = false; (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[aw])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera); return check; };

다음으로 서버 측과 교환할 일련의 초기 메시지를 정의합니다. 서버에 대한 클라이언트의 연결을 나타내는 새 socket.io 객체를 정의하십시오. 소켓이 연결되면 콘솔에 메시지를 기록합니다.

 var socket = io(); socket.on('connect', function() { console.log(' * Connection established'); });

기기가 모바일인지 확인하고, emit 함수를 사용하여 해당 정보를 서버로 보냅니다.

 if (mobilecheck()) { socket.emit('newHost'); } else { socket.emit('newMirror'); }

이것으로 클라이언트의 메시지 전송이 완료됩니다. 이제 이 메시지를 수신하고 적절하게 반응하도록 서버 코드를 수정하십시오. 서버 server.js 파일을 엽니다.

새로운 연결을 처리하고 즉시 클라이언트 유형을 수신합니다. 파일 끝에 다음을 추가합니다.

 /** * Handle socket interactions */ io.on('connection', function(socket) { socket.on('newMirror', function() { console.log(" * Participant registered as 'mirror'") }); socket.on('newHost', function() { console.log(" * Participant registered as 'host'"); }); });

다시 왼쪽 상단의 "표시"를 클릭하여 응용 프로그램을 미리 봅니다. 모바일 장치에 동일한 URL을 로드합니다. 터미널에 다음이 표시됩니다.

 listening on *: 3000 * Participant registered as 'host' * Participant registered as 'mirror'

이것은 클라이언트가 서버로 정보를 다시 보내는 단순 메시지 전달의 첫 번째 단계입니다. 실행 중인 NodeJS 프로세스를 종료합니다. 이 단계의 마지막 부분에서는 클라이언트가 카메라 정보를 서버로 다시 보내도록 합니다. public/client.js 를 엽니다.

파일의 맨 끝에 다음을 포함하십시오.

 var camera; if (mobilecheck()) { AFRAME.registerComponent('camera-listener', { tick: function () { camera = this.el.sceneEl.camera.el; var position = camera.getAttribute('position'); var rotation = camera.getAttribute('rotation'); socket.emit('onMove', { "position": position, "rotation": rotation }); } }); }

저장하고 닫습니다. 이 onMove 이벤트를 수신 대기하려면 서버 파일 server.js 를 엽니다.

소켓 코드의 newHost 블록에 다음을 추가합니다.

 socket.on('newHost', function() { console.log(" * Participant registered as 'host'"); /* start new code */ socket.on('onMove', function(data) { console.log(data); }); /* end new code */ });

다시 한 번 데스크탑과 모바일 장치에서 미리보기를 로드합니다. 모바일 클라이언트가 연결되면 서버는 클라이언트에서 서버로 전송되는 카메라 위치 및 회전 정보를 즉시 기록하기 시작합니다. 다음으로 서버에서 클라이언트로 정보를 다시 보내는 역방향을 구현합니다.

6단계: 서버에서 클라이언트로 정보 보내기

이 단계에서는 호스트의 카메라 정보를 모든 미러에 보냅니다. 기본 서버 파일인 server.js 를 엽니다.

onMove 이벤트 핸들러를 다음으로 변경합니다.

 socket.on('onMove', function(data) { console.log(data); // delete me socket.broadcast.emit('move', data) });

broadcast 수정자는 서버가 이 정보를 원래 보낸 사람을 제외하고 소켓에 연결된 모든 클라이언트에 보내도록 합니다. 이 정보가 클라이언트에 전송되면 그에 따라 미러의 카메라를 설정해야 합니다. 클라이언트 스크립트 public/client.js 를 엽니다.

여기에서 클라이언트가 데스크탑인지 확인하십시오. 그렇다면 이동 데이터를 수신하고 그에 따라 기록하십시오.

 if (!mobilecheck()) { socket.on('move', function(data) { console.log(data); }); }

데스크탑과 모바일 장치에서 미리보기를 로드합니다. 데스크톱 브라우저에서 개발자 콘솔을 엽니다. 그런 다음 휴대폰에 앱을 로드합니다. 휴대폰에서 앱을 로드하는 즉시 데스크톱의 개발자 콘솔에 카메라 위치 및 회전이 표시되어야 합니다.

public/client.js 에서 클라이언트 스크립트를 한 번 더 엽니다. 마지막으로 전송된 정보에 따라 클라이언트 카메라를 조정합니다.

move 이벤트에 대해 위의 이벤트 핸들러를 수정합니다.

 socket.on('move', function(data) { /* start new code */ camera.setAttribute('rotation', data["rotation"]); camera.setAttribute('position', data["position"]); /* end new code */ });

데스크톱과 휴대폰에 앱을 로드합니다. 휴대폰의 모든 움직임은 바탕 화면의 해당 거울에 반영됩니다! 이것으로 애플리케이션의 미러 부분을 마칩니다. 데스크톱 사용자는 이제 모바일 사용자에게 표시되는 내용을 미리 볼 수 있습니다. 이 섹션에 소개된 개념은 싱글 플레이어를 멀티 플레이어 게임으로 전환함에 따라 이 게임의 추가 개발에 중요합니다.

결론

이 자습서에서는 3차원 개체를 프로그래밍하고 이러한 개체에 간단한 상호 작용을 추가했습니다. 또한 클라이언트와 서버 간에 간단한 메시지 전달 시스템을 구축하여 모바일 사용자가 보는 것을 데스크탑 미리 보기에 적용했습니다.

이러한 개념은 기하학 및 재료의 개념이 iOS의 SceneKit(ARKit과 관련됨), Three.js(Aframe의 백본) 및 기타 3차원 라이브러리로 확장됨에 따라 webVR을 넘어 확장됩니다. 이 간단한 빌딩 블록을 함께 사용하면 본격적인 포인트 앤 클릭 어드벤처 게임을 만드는 데 있어 충분한 유연성을 얻을 수 있습니다. 더 중요한 것은 클릭 기반 인터페이스로 모든 게임을 만들 수 있다는 것입니다.

다음은 추가로 탐색할 몇 가지 리소스와 예입니다.

미러VR
위에서 구축한 라이브 미리보기의 본격적인 구현입니다. 단일 Javascript 링크를 사용하여 모바일의 모든 가상 현실 모델에 대한 실시간 미리 보기를 데스크톱에 추가할 수 있습니다.
조금씩
어린이 그림 갤러리 및 각 그림에 해당하는 가상 현실 모델.
프레임
가상 현실 개발을 위한 예제, 개발자 문서 및 추가 리소스.
Google Cardboard 경험
교육자를 위한 맞춤형 도구가 포함된 교실 환경.

다음 시간에는 웹 소켓을 사용하여 가상 현실 게임에서 플레이어 간의 실시간 통신을 용이하게 하는 완전한 게임을 구축할 것입니다. 아래 의견에 자신의 모델을 자유롭게 공유하십시오.