เริ่มต้นกับ WebVR

WebVR เป็น API JavaScript สำหรับการสร้างประสบการณ์เสมือนจริง 3 มิติในเบราว์เซอร์ ต้องใช้เวลาแฝงต่ำอัตราเฟรมสูงและประสิทธิภาพที่ยอดเยี่ยม เป้าหมายคือการทำให้ทุกคนง่ายขึ้นเพื่อรับประสบการณ์ VR โดยการลดอุปสรรคในการเข้า

WebGL ช่วยให้นักพัฒนาสามารถสร้างประสบการณ์ที่หลากหลายและคุณภาพของคอนโซลที่แสดงตามเวลาจริงบนอุปกรณ์มือถือและเบราว์เซอร์เดสก์ท็อป (เพียงทำให้แน่ใจว่าคุณได้รับ เว็บโฮสติ้ง เหมาะสำหรับความสามารถที่เหมาะสม) การสนับสนุนเบราว์เซอร์และอุปกรณ์สากลเกือบทำให้เป็นวิธีที่สมบูรณ์แบบสำหรับนักพัฒนาเว็บที่ต้องการสร้างประสบการณ์ VR ที่เหลือเชื่อ ที่นี่เราจะแสดงวิธีเริ่มต้นด้วย WebVR ที่ด้านล่างของบทความนี้คุณจะพบแหล่งข้อมูลที่เป็นประโยชน์เพื่อส่งเสริมความรู้ของคุณ

ในการกวดวิชาของเราเราจะใช้ WebVR ร่วมกับ สาม.js - ตัวเลือกไปสู่จำนวนมาก เครื่องมือออกแบบเว็บ มีให้สำหรับ 3D และ VR บนเว็บ มันเป็นเว็บไซต์ที่ได้รับรางวัลฟรีและโอเพ่นซอร์สที่ได้รับรางวัลใช้งานได้ฟรี นอกเหนือจากการมีพื้นหลัง JavaScript คุณสามารถดำน้ำในบทช่วยสอนนี้โดยไม่มีความรู้ก่อนหน้านี้และสร้างประสบการณ์ WebVR ครั้งแรกของคุณ เป้าหมายของการกวดวิชานี้คือการทำให้คุณเริ่มต้นและสร้างแรงบันดาลใจให้คุณสำรวจเทคโนโลยีที่น่าตื่นเต้นนี้ต่อไป ต้องการสิ่งที่ง่ายกว่า? ลอง สร้างเว็บไซต์ .

• ดาวน์โหลดไฟล์สำหรับบทช่วยสอนนี้จาก Filesilo

01. เปิดใช้งานการตั้งค่าสถานะ WebVR ใน Chrome

WebVR ยังคงเป็นเทคโนโลยีการทดลองและต้องใช้ HTTPS บนเซิร์ฟเวอร์ของคุณ มันจะไม่ทำงานบนอุปกรณ์มือถือที่ไม่มี polyfill.github.com/immersive-web/webvr-polyfill . อย่างไรก็ตามคุณสามารถเรียกใช้เนื้อหาในพื้นที่ใน Chrome สำหรับการทดสอบและสร้าง ให้แน่ใจว่าได้เปิดใช้งานแฟล็ก Chrome WebVR ประเภท Chrome: // Flags / Enable-Webvr ในเบราว์เซอร์ URL ของคุณแล้วคลิกเปิดใช้งานเพื่อเปิดใช้งาน คุณอาจต้องรีสตาร์ท Chrome เช่นกัน

02. ติดตั้งปลั๊กอิน Emulation WebVR API

ในการทดสอบในพื้นที่บนเดสก์ท็อปของคุณและหลีกเลี่ยงความต้องการอุปกรณ์มีปลั๊กอินที่ยอดเยี่ยมที่คุณสามารถใช้กับ Chrome ได้โดย ClickTorelease ปลั๊กอินจะเลียนแบบ ชุดหูฟัง VR สำหรับคุณและอนุญาตให้คุณย้ายและหมุนชุดหูฟังแทบ ( รับที่นี่ .

03. เปิดแถบเครื่องมืออุปกรณ์ในเครื่องมือสำหรับนักพัฒนา

ในการเลียนแบบอุปกรณ์มือถือหรือชุดหูฟังมันใช้งานได้ดีที่สุดเพื่อใช้การจำลองอุปกรณ์ในเครื่องมือ Chrome เปิดเครื่องมือสำหรับนักพัฒนาใน Chrome และสลับบนแถบเครื่องมืออุปกรณ์เพื่อดูมุมมองมือถือหมุนไปที่แนวนอนและเลือกการจำลองโทรศัพท์ที่ชื่นชอบ

04. สร้างไฟล์ HTML พื้นฐาน

ต่อไปคุณต้องตั้งค่าไฟล์ HTML พื้นฐาน คุณสามารถตั้งค่าไฟล์ CSS และ JavaScript ภายนอกหรือรวมอินไลน์เพื่อความเรียบง่าย คลาส Renderer Three.js จะสร้าง & lt; canvas & gt; องค์ประกอบสำหรับคุณ เพิ่มรหัสต่อไปนี้ให้กับคุณ index.html ไฟล์:

 & lt; html lang = "en" & gt;
& lt; หัว & gt;
& lt; ชื่อ & gt; webvr demo & lt; / ชื่อ & gt;
& lt; Meta Charset = "UTF-8" & GT;
& lt; meta name = "viewport" เนื้อหา =
"ความกว้าง = ความกว้างของอุปกรณ์, เริ่มต้นขนาด =
1.0, ผู้ใช้ scalable = ไม่ "& gt;
& lt; สไตล์ & gt;
HTML, ร่างกาย {margin: 0; padding: 0;
ล้น: ซ่อน; }
& lt; / style & gt;
& lt; / head & gt;
& lt; ร่างกาย & gt;
& lt; สคริปต์ & gt;
// รหัสจะไปที่นี่
& lt; / สคริปต์ & gt;
& lt; / body & gt; 

05. รวมคลาส Three.js

รวมลิงก์ไปยังห้องสมุด Three.JS ในหัวของไฟล์ของคุณ - โฮสต์ภายนอกหรือดาวน์โหลดจากที่เก็บ Three.js นอกจากนี้คุณยังต้องการคลาส WebVR ใหม่และคลาส BoxlineGeometry สำหรับการกวดวิชานี้ คุณสามารถค้นหาห้องสมุดและชั้นเรียนที่รองรับ ที่นี่ . หมายเหตุ: รหัสในบทช่วยสอนนี้ได้รับการทดสอบในรุ่นล่าสุดของ Three.js V99

 & lt; สคริปต์ SRC = "libs / three.min.js" & gt; & lt; / script & gt;
& lt; สคริปต์ SRC = "libs / webvr.js" & gt; & lt; / script & gt;
& lt; สคริปต์ SRC = "libs / boxlinegeometry.js" & gt;
& lt; / script & gt; 

06. เพิ่มตัวแปรทั่วโลก

ระหว่างแท็กสคริปต์สำหรับรหัสเพิ่มตัวแปรทั่วโลกต่อไปนี้เพื่อเข้าถึงกล้องฉากการแสดงผลวัตถุและ Raycaster เพิ่ม ตี ตัวแปรเพื่อติดตามวัตถุที่ตัดกันโดยการจ้องมองกล้อง สิ่งนี้จะแสดงให้เห็นถึงวิธีการรู้ว่าผู้ใช้ดูใน VR คืออะไร

 Var Clock = ใหม่สาม ..Clock ();
คอนเทนเนอร์ var, กล้อง, ฉาก, renderer, ห้อง,
crosshair, ตี;
Var Objects = []; // คอลเลกชันของวัตถุ
var num = 100; // จำนวนวัตถุ
Var Raycaster = New Three.raycaster (); 

07. สร้างฉาก 3 มิติ

คุณกำลังจะเพิ่มฉาก 3 มิติพื้นฐานซึ่งจะเป็นคอนเทนเนอร์สำหรับวัตถุของคุณ ฉากเป็นเวทีที่จะแสดงผลกับกล้อง การนำเสนอ 3 มิติทั้งหมดจะมีฉากหรือขั้นตอนของบางรูปแบบ สิ่งที่อยู่ในขั้นตอนนั้นและในมุมมองของกล้องคือสิ่งที่ผู้ใช้จะเห็น เพิ่มรหัสต่อไปนี้เพื่อเพิ่มฉาก:

 // สร้างวัตถุฉาก
ฉาก var = ใหม่สาม.Scene (); 

08. เพิ่มกล้องมุมมอง

ถัดไปคุณต้องเพิ่มกล้อง คุณจะใช้กล้องมุมมองที่มีไว้สำหรับฉาก 3 มิติ คุณลักษณะแรกคือมุมมองของกล้อง ประการที่สองคืออัตราส่วนภาพ ( ความกว้างความสูง . จากนั้นคุณสามารถบ่งบอกถึงเครื่องบินที่อยู่ใกล้และระยะทางระนาบไกลซึ่งกำหนดสิ่งที่จะมองเห็นได้กับกล้อง

 // สร้างกล้อง
กล้อง = ใหม่สามครั้ง PERSPECTIVECAMERA
(70, window.innerwidth / window.innerheight,
0.1, 1,000);
Scene.add (กล้อง); 

09. เพิ่มองค์ประกอบเรนเดอร์และผ้าใบ

Renderer จัดการกับภาพวาดของวัตถุในฉากของคุณที่มองเห็นได้กับกล้อง ตั้งค่าคุณสมบัติ antialias เป็น true เพื่อให้ขอบเรียบบนวัตถุ renderer สร้าง ตำแหน่ง ซึ่งจริง ๆ แล้วเป็น html & lt; canvas & gt; ธาตุ. จากนั้นคุณสามารถผนวกเข้ากับร่างกาย หมายเหตุการใช้แฟล็ก VR ที่เปิดใช้งาน VR ใหม่ของ Renderer

 Renderer = New Three.WebGlrenderer (
{antialias: true});
renderer.setpixelratio (หน้าต่าง
Devicepixelratio);
renderer.setsize (window.innerwidth, หน้าต่าง
innerHeight);
renderer.vr.enabled = true;
document.body.ephendchild (renderer
domelement); 

10. เพิ่ม crosshair กล้อง

เพื่อช่วยให้ผู้ใช้มุ่งเน้นไปที่จุดโฟกัสของกล้องมันเป็นแนวปฏิบัติที่ดีในการเพิ่มไอคอน crosshair หรือการกำหนดเป้าหมายที่ด้านหน้าของกล้อง คุณสามารถเพิ่มโดยตรงไปยังวัตถุกล้องได้ดังนั้นจึงควรอยู่เสมอ

 crosshair = ใหม่สาม.Mesh (
ใหม่สาม.ringbuffergeometry (0.02, 0.04, 32),
ใหม่สาม. ผู้ใช้บริการ ({
สี: 0xffffff,
ความทึบแสง: 0.5,
โปร่งใส: จริง
})
);
crosshair.position.z = - 2;
Camera.add (crosshair); 

11. สร้างวัตถุห้อง VR (ไม่บังคับ)

ถัดไปสร้างวัตถุห้องเรียบง่าย นี่เป็นสิ่งที่ดีที่จะให้ผู้ใช้มีความรู้สึกในการปฐมนิเทศในโลก VR มันสร้างกล่องห้องเรียบง่ายพร้อมเส้นเพื่อระบุผนังพื้นและเพดาน

 Room = New Three.lineSegments (
ใหม่สาม.boxlineGeometry (6, 6, 6, 10, 10, 10),
ใหม่สาม.lineBasicMaterial ({สี:
0x80808080});
room.position.y = 2;
Scene.add (ห้อง); 

12. เพิ่มไฟไปยังฉาก

เพื่อให้แสงสว่างในที่เกิดเหตุเราจะใช้แสงซีกโลกเรียบง่ายและแสงทิศทาง มันจะให้ทัศนวิสัยโดยรอบที่ดีและการแรเงาที่สมจริงจากแหล่งกำเนิดแสงที่สม่ำเสมอเช่นกัน

 Scene.add (ใหม่สาม. Hemispherelight
(0x806060, 0x404040));
Var Light = New Three.Direcidentallight
(0xFFFFFFF);
light.position.set (1, 1, 1). ส่วนล่อ ();
Scene.add (แสง); 

13. สร้างวัตถุบางอย่าง

คุณกำลังจะเติมเต็มห้องด้วยวัตถุต่อไป ใช้พวกเขาแบบสุ่มรอบห้อง คุณจะตั้งค่าการหมุนและสเกลแบบสุ่มเพื่อความหลากหลาย คุณสามารถเพิ่มรหัสเพิ่มเติมเล็กน้อยในขั้นตอนต่อไปที่มันบอกว่า สร้างแอตทริบิวต์ orbit เพื่อเปิดใช้งานเส้นทางวงโคจรที่กำหนดเอง

 Var Geometry = New Three.BoxBufferGeometry
(0.15, 0.15, 0.15);
สำหรับ (i = 0; i & lt; = num; i ++) {
วัสดุ var = ใหม่สาม.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);
// สร้างแอตทริบิวต์ orbit} 

14. เพิ่มคุณสมบัติของวงโคจรให้กับวัตถุ

เพื่อเปิดใช้งานการเคลื่อนไหวที่โดดเด่นแบบสุ่มที่ดีและเพื่อให้วัตถุจาก 'หลบหนีห้อง' เราจะกำหนดข้อมูลมุมเริ่มต้น (ในเรเดียน) และระยะทาง มันช่วยให้วิธีง่ายๆในการทำให้วัตถุเคลื่อนไหวในการวนซ้ำหลังจาก

// สร้างแอตทริบิวต์ orbit
// calc ระยะทางคงที่และกำหนดให้
วัตถุ
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 (วัตถุ);
วัตถุขืนไหล (วัตถุ); 

15. เพิ่มหน้าต่างตัวจัดการปรับขนาด

ในขณะที่เราทดสอบแอป WebVR ของเราเราจะปรับขนาดหน้าจอย้ายไปรอบ ๆ และอื่น ๆ เป็นความคิดที่ดีที่จะมีตัวจัดการที่ปรับขนาดของพื้นที่การเรนเดอร์และอัปเดตสิ่งต่าง ๆ เพื่อให้มันกรอกหน้าจออย่างถูกต้องและดูดี

 window.addeventlistener ('ปรับขนาด'
onwindowresize, false);
ฟังก์ชั่น onwindowresize () {
camera.aspect = window.innerwidth / หน้าต่าง
InnerHeight;
Camera.UpDateProunionMatrix ();
renderer.setsize (window.innerwidth,
window.innerHeight);
} 

16. สร้างปุ่ม WebVR

คลาส WebVR ใหม่ของ Three.js รวมถึงปุ่ม WebVR ซึ่งจัดการสลับเข้าและออกจากโหมด VR สำหรับเรา นอกจากนี้ยังจัดการถ้าอุปกรณ์ไม่รองรับโหมด VR คุณสามารถรวมไว้ด้วยรหัสง่าย ๆ นี้:

 // ปุ่ม three.js webvr เพื่อป้อน /
ออกจากโหมด VR
document.body.ephendchild (webvr.createbutton
(renderer)); 

17. เริ่มวงแอนิเมชั่น VR

โดยทั่วไปแล้วคุณจะใช้ ArequipanceanationFrame ในการจัดการลูปการเรนเดอร์ แต่ใน VR คุณต้องใช้ตัวจัดการลูปที่แตกต่างกันเพื่อให้แน่ใจว่าทุกอย่างพร้อมที่จะแสดงผลและคุณหลีกเลี่ยงการแฝงและการแสดงผล ให้ใช้ใหม่แทน SetanyationLoop และส่งต่อในฟังก์ชั่นการแสดงผลของคุณ

 // เริ่มวงอนิเมชั่น VR
raenderer.setanimationloop (แสดงผล); 

18. สร้างฟังก์ชั่นการแสดงผล

ถัดไปสร้างฟังก์ชั่นการแสดงผล หากคุณไม่ต้องการเคลื่อนไหววัตถุหรือทดสอบของคุณสำหรับกล้อง / crosshir ที่ตัดด้วยวัตถุคุณสามารถใช้รหัสต่อไปนี้:

 ฟังก์ชั่นแสดงผล () {
// ค้นหาจุดตัด
// เคลื่อนไหววัตถุ
// แสดงฉาก
renderer.render (ฉากกล้อง);
} 

19. ทดสอบสี่แยก

ในการเปิดใช้งานการทดสอบสำหรับวัตถุที่ตัดกันเรย์ติดตามจากกล้องเป็น Z Space ให้เพิ่มรหัสต่อไปนี้ในลูป Render ของคุณที่คุณแสดงความคิดเห็นในขั้นตอนสุดท้าย:

 raycaster.setfromcamera ({x: 0, y: 0}
กล้อง);
var ตัด = raycaster.interectobjects
(ห้องเด็ก);
ถ้า (intersects.length & gt; 0) {
ถ้า (กด! = ตัดกัน 
 .Object) {
ถ้า (กด) {hit.material.emissive
Sethex (hit.currenthex); }
Hit = ตัดกัน 
 .Object;
hit.currenthex = hit.material.emissive
GetHex ();
hit.material.emissive.sethex (0x00ff00);
}
} อื่น {
ถ้า (กด) {hit.material.emissive.sethex
(hit.currenthex); }
กด = ไม่ได้กำหนด;
} 

20. วัตถุเคลื่อนไหวพร้อมวงโคจร

ต่อไปคุณสามารถเคลื่อนไหววัตถุของคุณตามเส้นทางวงโคจรโดยใช้รหัสนี้:

 สำหรับ (i = 0; i & lt; = num; i ++) {
var o = วัตถุ [i];
o.rotation.y + =. 01;
ถ้า (i% 2 == 0) {
o.radians + =. 004;
o.radians2 + =. 005;
o.radians3 + =. 008;
} อื่น {
o.radians - =. 006;
o.radians2 - =. 005;
o.radians3 - =. 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
คุณอาจรู้อยู่แล้วว่าไซต์นี้เนื่องจากแกลเลอรีสินทรัพย์ที่น่าทึ่ง แต่ยังมีโหมด WebVR ที่ช่วยให้คุณนำทางใน VR

a-frame
นี่คือกรอบหินที่มั่นคงสำหรับ AR และ VR มันจัดการกับความเจ็บปวดของการปอกลมและการสนับสนุนอุปกรณ์สำหรับคุณรวมถึงการทำให้คุณสามารถแสดงผลในเบราว์เซอร์ของคุณสำหรับการทดสอบ แม้แต่บทคัดย่อการสร้างวัตถุ 3 มิติทั่วไป

สาม.js
ห้องสมุดนี้มีจำนวนมาก ตัวอย่าง ด้วยซอร์สโค้ดเพื่อช่วยให้คุณไปกับ WebVR มันเป็นจุดเริ่มต้นที่สมบูรณ์แบบ

webvr
เนื่องจาก WebVR เป็นเทคโนโลยีที่เกิดขึ้นใหม่จึงเป็นความคิดที่ดีที่จะติดตามการพัฒนาล่าสุด คุณต้องรู้ว่าอุปกรณ์ใดบ้างที่รองรับและภายใต้เงื่อนไขใด ไซต์นี้จะช่วยให้คุณติดตามข่าวสารล่าสุด มี หน้าทุ่มเทให้กับตัวอย่าง เช่นกัน.

และมันจะช่วยให้มีสิทธิ์เสมอ การจัดเก็บเมฆ เช่นกัน.

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 283 ของนิตยสารออกแบบเว็บสร้างสรรค์ นักออกแบบเว็บไซต์ . ซื้อปัญหา 283 หรือ ติดตาม .

อ่านเพิ่มเติม:

• 7 Bonkers VR แนวโน้มมุ่งหน้าไปทางคุณ
• เริ่มต้นด้วย Redux Thunk
• 11 เทรนด์เว็บร้อนในขณะนี้