WEBVR 시작하기

Sep 12, 2025

어떻게

점프 :

WebVR 리소스

WebVr은 브라우저에서 3D 가상 현실 경험을 생성하는 JavaScript API입니다. 이것은 낮은 대기 시간, 높은 프레임 속도 및 우수한 성능이 필요합니다. 그 목적은 누구나 장벽을 진입하게 낮춤으로써 VR 경험을 쉽게 할 수있게하는 것입니다.

WebGL을 사용하면 개발자가 모바일 장치 및 데스크톱 브라우저에서 실시간으로 렌더링하는 풍부한 콘솔 품질 경험을 만들 수 있습니다 (단지 웹 호스팅 최적의 능력을위한 권리). 거의 범용 브라우저 및 장치 지원으로 인어링 할 수없는 VR 경험을 원하는 웹 개발자에게 완벽한 접근 방식을 만듭니다. 여기에서는 WebVR을 시작하는 방법을 보여줍니다. 이 기사의 맨 아래에서는 지식을 더 멀리하는 데 도움이되는 자원을 찾을 수 있습니다.

우리의 튜토리얼에서는 WebVR을 사용하여 사용할 것입니다. 3. - 많은 것들을 선택하십시오 웹 디자인 도구 웹에서 3D 및 VR에 사용할 수 있습니다. 그것은 무료이며 오픈 소스, 가벼운 수상 경력이있는 웹 사이트를 사용합니다. JavaScript 배경 이외에는 사전 지식 없이이 자습서로 잠수하고 첫 번째 WebVR 경험을 만듭니다. 이 튜토리얼의 목표는이 매우 흥미 진진한 기술을 계속 탐구하기 위해 계속해서 시작하고 영감을주는 것입니다. 더 간단한 것을 원하십니까? 해보세요 웹 사이트 빌더 ...에

Filesilo 에서이 자습서의 파일을 다운로드하십시오

01. Chrome에서 WebVR 플래그를 활성화합니다

WebVR은 여전히 실험 기술이며 HTTPS가 서버에서 실행되도록 요구합니다. A. 없이는 모바일 장치에서 실행되지 않습니다 polyfill.github.com/immersive-web/webvr-polyfill. ...에 그러나 테스트 및 빌딩을 위해 Chrome에서 로컬로 콘텐츠를 실행할 수 있습니다. Chrome WebVR 플래그를 활성화하십시오. 유형 크롬 : // 플래그 / enable-webvr. URL 브라우저에 넣은 다음 활성화를 클릭하여 활성화하십시오. 크롬을 다시 시작해야 할 수도 있습니다.

02. WebVR API 에뮬레이션 플러그인을 설치합니다

데스크탑에서 로컬로 테스트하고 장치의 필요성을 피하기 위해 Chrome에서 ClickTorelease에서 사용할 수있는 훌륭한 플러그인이 있습니다. 플러그인은 A를 에뮬레이트합니다 VR 헤드셋 당신을 위해 헤드셋을 사실상 이동하고 회전시킬 수있게 해줍니다 ( 여기에서 가져와 짐마자

03. 개발자 도구에서 장치 도구 모음을 엽니 다

Device toolbar within dev tools — 이것은 모바일 장치 또는 헤드셋을 모방합니다

모바일 장치 또는 헤드셋을 에뮬레이트하려면 Chrome 도구에서 장치 에뮬레이션을 사용하는 것이 가장 좋습니다. 개발자 도구를 Chrome에서 열고 장치 도구 모음에서 전환하여 모바일보기를 보려면 가로로 회전하고 즐겨 찾는 전화 에뮬레이션을 선택하십시오.

04. 기본 HTML 파일을 만듭니다

그런 다음 기본 HTML 파일을 설정해야합니다. 외부 CSS 및 JavaScript 파일을 설정하거나 단순성을 위해 인라인을 포함 할 수 있습니다. 3.js의 렌더러 클래스는 A를 만듭니다 & lt; 캔버스 & gt; 당신을위한 요소. 다음 코드를 해당 코드를 추가하십시오 index.html. 파일:

& lt; html lang = "en"& gt; & lt; head & gt; & lt; Title & gt; Webvr demo & lt; / title & gt; & lt; meta charset = "UTF-8"& gt; & lt; meta name = "뷰포트"내용 = "너비 = 장치 폭, 초기 스케일 = 1.0, 사용자 확장 가능 = 아니오 "& gt; & lt; 스타일 & gt; html, body {여백 : 0; 패딩 : 0; 오버플로 : 숨김; } & lt; style & gt; & lt; / head & gt; & lt; body & gt; & lt; script & gt; // 코드가 여기로갑니다 & lt; / script & gt; & lt; / body & gt;

05. 3.JS 수업을 포함하십시오

파일의 머리에 3.js 라이브러리에 대한 링크가 포함됩니다. 외부에서 호스팅되거나 Three.js 저장소에서 다운로드하십시오. 또한이 자습서에 대해 새로운 WebVr 클래스 및 BoxLineGeometry 클래스가 필요합니다. 라이브러리 및 지원 클래스를 찾을 수 있습니다 여기 ...에 참고 :이 자습서의 코드는 3.JS V99의 최신 릴리스에서 테스트되었습니다.

& lt; script src = "libs / three.min.js"& gt; & lt; / script & gt; & lt; script src = "libs / webvr.js"& gt; & lt; / script & gt; & lt; script src = "libs / boxlinegeometry.js"& gt; & lt; / script & gt;

06. 글로벌 변수를 추가하십시오

코드의 스크립트 태그 사이에서 다음 전역 변수를 추가하여 카메라, 장면, 렌더링, 개체 및 레이 캐스터에 전역으로 액세스 할 수 있습니다. 또한 A를 추가하십시오 히트 카메라의 시선이 교차하는 객체를 추적하는 변수. 이렇게하면 사용자가 VR에서보고있는 것을 알아야하는 방법을 보여줍니다.

 VAR 클록 = 새로운 3.CLock ();
var 컨테이너, 카메라, 장면, 렌더러, 방,
십자가, 히트;
var 객체 = []; // 객체의 컬렉션
var num = 100; // 객체 수
var raycaster = new 3.raycaster ();

07. 3D 장면을 만듭니다

객체의 컨테이너가 될 기본 3D 장면을 추가 할 것입니다. 장면은 카메라로 렌더링 할 단계입니다. 모든 3D 프리젠 테이션에는 일부 양식의 장면이나 무대가 있습니다. 그 단계와 카메라의 관점에서는 사용자가 볼 수있는 것입니다. 장면을 추가하려면 다음 코드를 추가하십시오.

 // 장면 객체를 만듭니다
var scene = new three.scene ();

08. Perspective 카메라를 추가합니다

다음으로 카메라를 추가해야합니다. 3D 장면을 의미하는 원근법 카메라를 사용할 수 있습니다. 첫 번째 속성은 카메라의 시야입니다. 두 번째는 종횡비입니다 ( 너비 / 높이 짐마자 그런 다음 가까운 클리핑 평면과 원거리 클리핑 비행기 거리를 나타내며 카메라에 표시되는 것을 정의 할 수 있습니다.

 // 카메라를 만듭니다
카메라 = 새로운 3.PerspectiveCamera.
(70, window.innerWidth / window.innerHeight,
0.1, 1000);
Scene.add (카메라);

09. 렌더러와 캔버스 요소를 추가합니다

렌더러는 카메라에 보이는 장면의 객체의 도면을 처리합니다. antialias 속성을 true로 설정하여 객체에서 부드러운 가장자리를 얻습니다. 렌더러가 A를 만듭니다 도메인 , 실제로 HTML입니다 & lt; 캔버스 & gt; 요소. 그런 다음 신체에 추가 할 수 있습니다. 렌더러의 새로운 VR 사용 플래그리를 사용하는 경우에 유의하십시오.

 렌더러 = 새로운 3.WebGlRenderer (
{antialias : true});
renderer.setPixelratio (창)
DevicePixelRatio);
renderer.setsize (window.innerWidth, 창).
innerheight);
renderer.vr.enabled = true;
document.body.appendchild (렌더러.
DOMElement);

10. 카메라 십자가를 추가하십시오

사용자가 카메라의 초점을 맞추는 것을 돕기 위해 카메라 앞에 십자선이나 타겟팅 아이콘을 추가하는 것이 좋습니다. 항상 카메라 객체에 직접 추가 할 수 있으므로 항상있는 곳입니다.

 Crosshair = New 3.Mesh (
새로운 3. 링 버머 미팅 (0.02, 0.04, 32),
새로운 3. ashbasicmaterial ({
색상 : 0xFFFFFF,
불투명도 : 0.5,
투명 : 사실
})
);
CrossHair.position.z = - 2;
camera.add (십자선);

11. VR 룸 객체 만들기 (선택 사항)

그런 다음 간단한 객실 객체를 만듭니다. 이것은 사용자에게 VR 세계에서 오리엔테이션을 제공하는 것이 좋습니다. 그것은 벽, 바닥 및 천장을 나타내는 선이있는 간단한 방 상자를 만듭니다.

 room = new 3.LineseGments (
NEW 3. 상자 LineGeometry (6, 6, 6, 10, 10, 10),
새로운 3.LineBasicMaterial ({색상 :
0x808080}));
room.position.y = 2;
Scene.add (방);

12. 장면에 조명을 추가하십시오

장면을 밝히기 위해서는 단순한 반구 빛과 방향 빛을 사용할 것입니다. 균일 한 광원에서 균일 한 광원에서 현실적인 음영을 제공합니다.

 Scene.add (New Three.Hemispherelight)
(0x806060, 0x404040));
var light = new three.directionallight
(0xFFFFFF);
light.position.set (1, 1, 1). 진정화 ();
Scene.add (빛);

13. 일부 개체를 만듭니다

다음 객체로 방을 채울 것입니다. 방에 무작위로 적용하십시오. 또한 회전을 설정하고 다양성을 위해 무작위로 확장 할 것입니다. 다음 단계에서 조금 더 많은 코드를 추가 할 수 있습니다. 궤도 속성 만들기 사용자 정의 궤도 경로를 활성화하려면.

 VAR Geometry = New Three.BoxBufferGeometry.
(0.15, 0.15, 0.15);
for (i = 0; I & lt; = num; i ++) {
var material = new three.meshlambertmaterial
({색상 : math.random () * 0xffffff});
var object = new three.mesh.
(기하학, 재료);
object.position.set (math.random () * 4.0.
- 2.0, math.random () * 4.0 - 2.0, 수학.
임의의 () * 4.0 - 2.0);
object.scale.set (math.random () +, 5, 수학.
랜덤 () +. 5, math.random () +. 5);
object.rotation.set (math.random () * 2 *
math.pi, math.random () * 2 * math.pi, 수학.
무작위 () * 2 * math.pi);
// 궤도 속성 만들기}

14. orbit 속성을 개체에 추가합니다

좋은 무작위 모션을 사용하도록 설정하고 객체를 '탈출 방지'에서 보관하기 위해 초기 각도 데이터 (라디안 단위)와 거리를 할당합니다. 렌더링 루프에서 객체를 애니메이션을 애니메이션으로 애니메이션하게 만드는 간단한 방법을 사용할 수 있습니다.

// 궤도 속성을 만듭니다
// 끊임없는 거리를 일정하고 할당합니다
목적
var a = new three.Vector3 (0, 0, 0);
var b = object.position;
var d = a.distanceto (b);
object.distance = d;
object.radians = math.random () * 360 * 수학.
PI / 180; // 초기 각도
object.radians2 = math.random () * 360 * 수학.
PI / 180; // 초기 각도
object.radians3 = math.random () * 360 * 수학.
PI / 180; // 초기 각도
room.add (객체);
objects.push (객체);

15. 창 크기 조정 핸들러를 추가합니다

우리가 우리의 webvr 앱을 테스트 할 때, 화면의 크기를 조정하고, 그것을 주위를 움직이고, 그렇게하십시오. 렌더 영역의 치수를 조정하고 화면을 올바르게 채우고 멋지게 보이는 핸들러를 사용하는 것이 좋습니다.

 window.addeventListener ( '크기 조정',
onwindowresize, false);
기능 onWindowResize () {
camera.aspect = window.innerWidth / window.
innerheight;
camera.updateProjectionMatrix ();
renderer.setsize (window.innerWidth,
window.nnerheight);
}

16. WebVR 버튼을 만듭니다

이미지 1/2.

이미지 2의 2.

Three.js의 새로운 WebVr 클래스에는 VR 모드에서 VR 모드로 토글 링을 처리하는 WebVR 버튼이 포함되어 있습니다. 또한 장치가 VR 모드를 지원하지 않는 경우 핸들입니다. 이 간단한 코드로 포함 할 수 있습니다.

 // 3.JS WEBVR 버튼을 입력 /
VR 모드를 종료하십시오
Document.Body.AppendChild (WebVr.CreateButton.
(렌더러));

17. VR 애니메이션 루프를 시작하십시오

일반적으로, 당신은 그를 사용할 것입니다 requestanimationframe. 렌더링 루프를 처리하기 위해 VR에서는 다른 모든 루프 핸들러를 사용하여 모든 것을 렌더링 할 준비가되었고 대기 시간을 피하고 문제를 렌더링해야합니다. 대신 새로운 것을 사용하십시오 SetAnimationLoop. 렌더링 기능을 전달합니다.

 // VR 애니메이션 루프를 시작합니다
renderer.setAnimationLoop (렌더링);

18. 렌더링 기능을 만듭니다

그런 다음 렌더링 기능을 만듭니다. 객체와 교차하는 카메라 / 십자형을 테스트하거나 객체를 애니메이션하게 누르지 않으려면 다음 코드를 사용할 수 있습니다.

 함수 렌더링 () {
// 교차로를 찾는다
// 객체를 움직이게합니다
// 장면을 렌더링합니다
Renderer.Render (장면, 카메라);
}

19. 교차로를 테스트합니다

카메라에서 z 공간으로 추적 된 레이를 교차하는 객체에 대한 테스트를 사용하려면 마지막 단계에서 렌더링 루프에 다음 코드를 추가합니다.

 raycaster.setFromCamera ({x : 0, y : 0},
카메라);
VAR 교차 = RAYCASTER.INTERSECTOBJECTS.
(room.children);
if (intersects.length & gt; 0) {
if (Hit! = =  .Object) {
if (히트) {chit.material.emissive.
SetHex (HIT.CurrenThrex); }
HIT = 교차  .Object;
HIT.CURRETHEX = HIT.MATERIAL.Emissive.
gethex ();
HIT.MATERIAL.EMISSIVE.SEXEX (0x00FF00);
}
} else {
if (히트) {chit.material.emissive.sethex.
(HIT.CurrenThrex); }
= = 정의되지 않은;
}

20. 궤도를 따라 객체를 애니메이션합니다

그런 다음이 코드를 사용하여 궤도 경로를 따라 객체를 애니메이션을 적용 할 수 있습니다.

(i = 0; i ≤ num; i ++) { var o = 객체 [i]; o.rotation.y + =. 01; if (i % 2 == 0) { O.Radians + =. 004; o.Radians2 + =. 005; o.radians3 +. 008; } else { O.Radians - =. 006; O.Radians2 - 005; 005; o.radians3 - 003; 003; } o.position.x = (math.cos (o.radians) * o.distance); o.position.z = (math.sin (o.radians3) * o.distance); o.position.y = (math.sin (o.radians2) * o.distance * .5); }

21. WebVR 장면을 렌더링하십시오

마지막으로 유용한 렌더링 기능을 사용하여 장면을 렌더링 할 수 있습니다. 이 행을 이미 추가하지 않은 경우 지금하십시오. 이 문제를 추가하면 모든 것을 테스트 할 수 있으며 브라우저에서 WebVR 장면 렌더링을 볼 수 있습니다. 모바일 장치 또는 VR 헤드셋에서 확인할 수도 있습니다.

 // 장면을 렌더링합니다
Renderer.Render (장면, 카메라);

WebVR 리소스

WebVR에서 시작하는 것은 압도적 일 수 있습니다. WebVR 및 리소스를 사용하여 사이트의 몇 가지 예를 수행하여 롤링을 돕습니다.

SketchFab.
자산의 놀라운 갤러리로 인해 이미이 사이트를 알고 있지만 VR에서 탐색 할 수있는 WebVR 모드가 있습니다.

프레임
이것은 AR과 VR을위한 암석 단단한 프레임 워크입니다. 브라우저에서 테스트를 위해 브라우저에서 렌더링 할 수있게 해주는 등의 폴백 및 장치 지원의 통증을 처리합니다. 그것은 심지어 공통 3D 객체의 생성을 추상화합니다.

3.
이 도서관에는 수많은 있습니다 예 WebVR을 사용해 도와주는 소스 코드가 있습니다. 완벽한 출발점입니다.

WebVr.
WEBVR은 신흥 기술이므로 최신 개발을 유지하는 것이 좋습니다. 어떤 장치가 지원되는지와 조건하에 어떤 장치를 알아야합니까? 이 사이트는 최신 정보를 유지하는 데 도움이됩니다. 거기에 예제 전용 페이지 너무.

그리고 그것은 항상 맞는 것을 돕습니다 클라우드 스토리지 너무.

이 기사는 원래 Creative Web Design Magazine의 Issage 283에서 출판되었습니다. 웹 디자이너 ...에 구매 문제 283. 또는 구독 ...에

자세히보기 :

7 Bonkers VR Trends가 당신의 길을 향하고 있습니다
Redux 썽크를 시작하십시오
지금 11 뜨거운 웹 트렌드

WEBVR 시작하기

01. Chrome에서 WebVR 플래그를 활성화합니다

02. WebVR API 에뮬레이션 플러그인을 설치합니다

03. 개발자 도구에서 장치 도구 모음을 엽니 다

04. 기본 HTML 파일을 만듭니다

05. 3.JS 수업을 포함하십시오

06. 글로벌 변수를 추가하십시오

07. 3D 장면을 만듭니다

08. Perspective 카메라를 추가합니다

09. 렌더러와 캔버스 요소를 추가합니다

10. 카메라 십자가를 추가하십시오

11. VR 룸 객체 만들기 (선택 사항)

12. 장면에 조명을 추가하십시오

13. 일부 개체를 만듭니다

14. orbit 속성을 개체에 추가합니다

15. 창 크기 조정 핸들러를 추가합니다

16. WebVR 버튼을 만듭니다

17. VR 애니메이션 루프를 시작하십시오

18. 렌더링 기능을 만듭니다

19. 교차로를 테스트합니다

20. 궤도를 따라 객체를 애니메이션합니다

21. WebVR 장면을 렌더링하십시오

WebVR 리소스

어떻게 - 가장 인기있는 기사

CSS 모양으로 디자인하는 방법 : 도입

Photoshop에서 스마트 레이어를 사용하는 방법

VR에서 2D 캐릭터를 삶으로 가져 오는 방법

3ds Max에서 하드 표면 모델링을 선명하게

Three.js를 사용하여 WebGL 시작하기

프론트 엔드 테스트 소개

3ds Max에서 유성 샤워를 만듭니다

InDesign에서 책 표지를 디자인하는 방법

카테고리