Bắt đầu với WebVR

WebVR là API JavaScript để tạo các trải nghiệm thực tế ảo 3D trong trình duyệt. Điều này đòi hỏi độ trễ thấp, tốc độ khung hình cao và hiệu suất tuyệt vời. Mục đích của nó là làm cho bất cứ ai dễ dàng hơn để có được kinh nghiệm VR bằng cách giảm các rào cản để nhập cảnh.

WebGL cho phép các nhà phát triển tạo những trải nghiệm chất lượng giao diện điều khiển phong phú, kết xuất trong thời gian thực trên các thiết bị di động và trình duyệt máy tính để bàn (chỉ cần đảm bảo bạn nhận được web hosting đúng cho khả năng tối ưu). Hầu hết trình duyệt và hỗ trợ thiết bị phổ biến làm cho nó trở thành một cách tiếp cận hoàn hảo cho các nhà phát triển web muốn tạo trải nghiệm VR đáng kinh ngạc. Ở đây, chúng tôi chỉ cho bạn cách bắt đầu với WebVR. Ở dưới cùng của bài viết này, bạn sẽ tìm thấy một số tài nguyên hữu ích để tiếp tục kiến ​​thức của bạn.

Trong hướng dẫn của chúng tôi, chúng tôi sẽ sử dụng WebVR kết hợp với ba.js. - một lựa chọn đi đến nhiều Công cụ thiết kế web Có sẵn cho 3D và VR trên web. Đó là các trang web miễn phí và nguồn mở, nhẹ và vô số trang web giành giải thưởng sử dụng nó. Khác với việc có nền JavaScript, bạn có thể lao vào hướng dẫn này mà không có kiến ​​thức trước và tạo trải nghiệm WebVR đầu tiên của mình. Mục tiêu của hướng dẫn này là giúp bạn bắt đầu và truyền cảm hứng cho bạn để tiếp tục khám phá công nghệ rất thú vị này. Muốn một cái gì đó đơn giản hơn? Thử A. người tạo ra trang web .

• Tải xuống các tệp cho hướng dẫn này từ filesilo

01. Kích hoạt cờ WebVR trong Chrome

WebVR vẫn là một công nghệ thử nghiệm và yêu cầu HTTPS chạy trên máy chủ của bạn. Nó sẽ không chạy trên thiết bị di động mà không cần polyfill.github.com/immersive-web/webvr-polyfill. . Tuy nhiên, bạn có thể chạy nội dung cục bộ trong Chrome để thử nghiệm và xây dựng. Hãy chắc chắn để kích hoạt cờ WebVR Chrome. Kiểu Chrome: // Cờ / Bật-WebVR vào trình duyệt URL của bạn, rồi bấm Bật để kích hoạt nó. Bạn cũng có thể cần phải khởi động lại Chrome.

02. Cài đặt plugin mô phỏng API WebVR

Để kiểm tra cục bộ trên máy tính để bàn của bạn và tránh nhu cầu về một thiết bị, có một plugin tuyệt vời mà bạn có thể sử dụng trên Chrome bởi Clicktorelease. Plugin sẽ mô phỏng một Tai nghe vr. cho bạn và cho phép bạn di chuyển và xoay tai nghe hầu như ( Nhận nó ở đây ).

03. Mở thanh công cụ thiết bị trong các công cụ phát triển

Để mô phỏng một thiết bị di động hoặc tai nghe, nó hoạt động tốt nhất để sử dụng mô phỏng thiết bị trong các công cụ Chrome. Mở các công cụ dành cho nhà phát triển trong Chrome và chuyển đổi trên thanh công cụ thiết bị để xem chế độ xem trên thiết bị di động, xoay sang phong cảnh và chọn mô phỏng điện thoại yêu thích.

04. Tạo một tệp HTML cơ bản

Tiếp theo, bạn cần thiết lập một tệp HTML cơ bản. Bạn có thể thiết lập các tệp CSS và JavaScript bên ngoài hoặc bao gồm nội tuyến để đơn giản. Lớp kết xuất của ba.js sẽ tạo ra một & lt; canvas & gt; yếu tố cho bạn. Thêm mã sau vào index.html. tập tin:

 & lt; html lang = "en" & gt;
& lt; Head & GT;
& lt; Tiêu đề & GT; WebVR Demo & LT; / Tiêu đề & GT;
& lt; meta charset = "utf-8" & gt;
& lt; meta name = "viewport" Nội dung =
"Chiều rộng = chiều rộng thiết bị, tỷ lệ ban đầu =
1.0, có thể mở rộng người dùng = không "& gt;
& lt; phong cách & gt;
HTML, cơ thể {lề: 0; Đệm: 0;
tràn: ẩn; Không thể
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; script & gt;
// mã sẽ đến đây
& lt; / script & gt;
& lt; / body & gt; 

05. Bao gồm các lớp ba.js

Bao gồm một liên kết đến thư viện ba.js trong đầu tệp của bạn - hoặc được lưu trữ bên ngoài hoặc tải xuống từ kho.js. Bạn cũng sẽ cần lớp WebVR mới và lớp BoxLineGreryry cho hướng dẫn này. Bạn có thể tìm thấy thư viện và các lớp hỗ trợ đây . Lưu ý: Mã trong hướng dẫn này đã được thử nghiệm trên bản phát hành mới nhất của ba.js v99.

 & lt; script src = "libs / ba.min.js" & gt; & lt; / script & gt;
& lt; script src = "libs / webvr.js" & gt; & lt; / script & gt;
& lt; script src = "libs / boxlineegorryry.js" & gt;
& lt; / script & gt; 

06. Thêm các biến toàn cục

Giữa các thẻ tập lệnh cho mã, thêm các biến toàn cục sau đây để truy cập trên toàn cầu máy ảnh, cảnh, kết xuất, đối tượng và raycaster. Cũng thêm A. ĐÁNH Biến để theo dõi các đối tượng được giao nhau bởi ánh mắt của máy ảnh. Điều này sẽ chứng minh cách biết người dùng đang nhìn vào VR.

 var clock = new ba.clock ();
Var Container, Camera, Cảnh, Trình kết xuất, Phòng,
Crosshair, đánh;
đối tượng var = []; // Bộ sưu tập các đối tượng
var num = 100; // số lượng đối tượng
var raycaster = mới ba.raycaster (); 

07. Tạo một cảnh 3D

Bạn sẽ thêm một cảnh 3D cơ bản, sẽ là container cho các đối tượng của bạn. Khung cảnh là giai đoạn sẽ kết xuất với máy ảnh. Tất cả các bài thuyết trình 3D sẽ có một cảnh hoặc giai đoạn của một số hình thức. Những gì trong giai đoạn đó và trong quan điểm của máy ảnh là những gì người dùng sẽ thấy. Thêm mã sau để thêm cảnh:

 // Tạo một đối tượng cảnh
Cảnh var = mới ba.scene (); 

08. Thêm máy ảnh phối cảnh

Tiếp theo, bạn cần thêm một máy ảnh. Bạn sẽ sử dụng máy ảnh phối cảnh, có nghĩa là cho các cảnh 3D. Thuộc tính đầu tiên là trường nhìn của máy ảnh. Thứ hai là tỷ lệ khung hình ( Chiều rộng / chiều cao ). Sau đó, bạn có thể chỉ ra mặt phẳng cắt gần và khoảng cách xa cách cắt xa, xác định những gì có thể nhìn thấy được với máy ảnh.

 // tạo camera
camera = mới ba.perspectiveCamera
(70, window.innerwidth / window.innerheight,
0,1, 1000);
cảnh.add (camera); 

09. Thêm một trình kết xuất và yếu tố canvas

Trình kết xuất xử lý bản vẽ của các vật thể trong cảnh của bạn hiển thị với máy ảnh. Đặt thuộc tính AntiaQuias thành TRUE để có được các cạnh mượt mà trên đối tượng. Trình kết xuất tạo ra một Domelement. , đó thực sự là một html & lt; canvas & gt; thành phần. Sau đó, bạn có thể nối vào cơ thể. Lưu ý việc sử dụng cờ hỗ trợ VR mới của trình kết xuất.

 Trình kết xuất = Mới ba.webglrenderer (
{antialias: TRUE});
renderer.setpixelratio (cửa sổ.
thiết bịpixelratio);
renderer.setsize (window.innerWidth, Window.
bên trong);
renderer.vr.enables = true;
tài liệu.Body.appenDchild (renderer.
Domelement); 

10. Thêm máy ảnh Crosshair

Để giúp người dùng định hướng đến điểm tiêu cự của máy ảnh, đó là thực hành tốt để thêm một biểu tượng chéo hoặc nhắm mục tiêu trước máy ảnh. Bạn có thể thêm nó trực tiếp vào đối tượng máy ảnh để nó luôn luôn ở đâu.

 Crosshair = mới ba.mesh (
ba.ringbufferegouretry mới (0,02, 0,04, 32),
ba.meshbasicm vật liệu mới ({
Màu sắc: 0xffffff,
Độ mờ đục: 0,5,
Trong suốt: Đúng.
})
);
crosshair.poseition.z = - 2;
camera.add (crosshair); 

11. Tạo một đối tượng phòng VR (tùy chọn)

Tiếp theo, tạo một đối tượng phòng đơn giản. Điều này là tốt đẹp để cung cấp cho người dùng một cảm giác định hướng trong thế giới VR. Nó tạo ra một hộp phòng đơn giản với các đường để chỉ các bức tường, sàn và trần.

 Phòng = Mới ba.linesegments (
Three.boxLinePlery mới (6, 6, 6, 10, 10, 10),
ba.linebasicm vật phẩm mới ({màu:
0x808080}));
room.poseition.y = 2;
cảnh .add (phòng); 

12. Thêm đèn vào cảnh

Để thắp sáng cảnh, chúng ta sẽ sử dụng đèn bán cầu đơn giản và đèn định hướng. Nó sẽ cung cấp một tầm nhìn xung quanh tốt đẹp và một số bóng thực tế từ nguồn sáng đồng đều là tốt.

 cảnh.Add (mới ba.hemishiedlight
(0x806060, 0x404040));
var light = mới ba.directallallight
(0xffffff);
Light.Pocation.set (1, 1, 1) .Normalize ();
cảnh.add (ánh sáng); 

13. Tạo một số đối tượng

Bạn sẽ điền vào phòng với các đối tượng tiếp theo. Áp dụng chúng ngẫu nhiên xung quanh phòng. Bạn cũng sẽ đặt vòng quay và chia tỷ lệ ngẫu nhiên cho sự đa dạng. Bạn có thể thêm một chút mã trong bước tiếp theo, nơi nó nói Tạo thuộc tính Orbit. để kích hoạt một số đường dẫn quỹ đạo tùy chỉnh.

 VAR GEOMETRY = MỚI ba.BoxBufferGreGrery
(0,15, 0,15, 0,15);
cho (i = 0; i & lt; = num; i ++) {
Var vật liệu = mới ba.meshlambertm vật liệu
({màu: math.random () * 0xffffff});
var object = mới ba.mesh
(hình học, vật liệu);
object.poseition.set (math.random () * 4.0
- 2.0, Math.Random () * 4.0 - 2.0, Toán.
ngẫu nhiên () * 4.0 - 2.0);
Object.scale.set (Math.Random () +. 5, Toán.
ngẫu nhiên () +. 5, math.random () +. 5);
object.rotation.set (math.random () * 2 *
Math.pi, math.random () * 2 * math.pi, toán.
ngẫu nhiên () * 2 * math.pi);
// tạo thuộc tính Orbit} 

14. Thêm các thuộc tính Orbit vào các đối tượng

Để cho phép một số chuyển động quỹ đạo ngẫu nhiên tốt đẹp, và để giữ cho các đối tượng từ 'thoát khỏi phòng', chúng tôi sẽ chỉ định một số dữ liệu góc ban đầu (bằng radian) và khoảng cách. Nó cho phép một cách đơn giản để làm động các đối tượng trong vòng lặp render sau đó.

// Tạo thuộc tính Orbit
// Khoảng cách Calc là hằng số và gán cho
vật
var a = mới ba.vector3 (0, 0, 0);
var b = object.poseition;
var d = a.distanceto (b);
Object.distance = D;
object.radians = math.random () * 360 * Toán.
PI / 180; // Góc ban đầu
Object.radians2 = Math.Random () * 360 * Toán.
PI / 180; // Góc ban đầu
Object.radians3 = Math.Random () * 360 * Toán.
PI / 180; // Góc ban đầu
room.add (đối tượng);
đối tượng.push (đối tượng); 

15. Thêm một trình xử lý thay đổi kích thước cửa sổ

Khi chúng tôi kiểm tra ứng dụng WebVR của chúng tôi, chúng tôi sẽ thay đổi kích thước màn hình, di chuyển nó xung quanh, v.v. Đó là một ý tưởng tốt để có một trình xử lý điều chỉnh kích thước của khu vực kết xuất và cập nhật mọi thứ để giữ cho nó lấp đầy màn hình đúng cách và nhìn đẹp.

 window.addeventlistener ('thay đổi kích thước',
onwindowresize, sai);
chức năng onwindowresize () {
Camera.aspect = window.innerwidth / window.
bên trong;
camera.updateProuchmatrix ();
renderer.setsize (window.innerwidth,
window.innerheight);
} 

16. Tạo nút WebVR

Lớp WebVR mới của ba.JS bao gồm nút WebVR, xử lý chuyển đổi trong và ngoài chế độ VR cho chúng tôi. Nó cũng xử lý nếu thiết bị không hỗ trợ chế độ VR. Bạn có thể bao gồm nó với mã đơn giản này:

 // nút webvr ba.js để nhập /
Thoát khỏi chế độ VR.
Tài liệu.Body.appendChild (WebVR.createbutton.
(renderer)); 

17. Bắt đầu vòng lặp hoạt hình VR

Thông thường, bạn sẽ sử dụng Yêu cầu tuyệt vời Để xử lý vòng lặp kết xuất, nhưng trong VR, bạn phải sử dụng trình xử lý vòng lặp khác để đảm bảo mọi thứ đã sẵn sàng để hiển thị và bạn tránh các vấn đề về độ trễ và kết xuất. Thay vào đó, hãy sử dụng cái mới setanimationloop. và vượt qua trong chức năng kết xuất của bạn.

 // Bắt đầu vòng lặp hoạt hình VR
renderer.setanimationloop (render); 

18. Tạo chức năng kết xuất

Tiếp theo, tạo một chức năng kết xuất. Nếu bạn không muốn làm động các đối tượng hoặc kiểm tra của mình cho máy ảnh / crosshair giao nhau với các đối tượng, bạn có thể sử dụng mã sau:

 Chức năng Render () {
// tìm giao lộ
// hoạt hình các đối tượng
// Kết xuất cảnh
renderer.render (cảnh, máy ảnh);
} 

19. Kiểm tra giao lộ

Để cho phép thử nghiệm các đối tượng giao nhau vào tia được truy tìm từ máy ảnh thành khoảng trắng, hãy thêm mã sau vào vòng lặp kết xuất của bạn nơi bạn nhận xét trong bước cuối cùng:

 raycaster.setfromcamera ({x: 0, y: 0},
Máy ảnh );
var giao nhau = raycaster.intersectObjects
(Room.Children);
if (giao nhau.length & gt; 0) {
if (nhấn! = giao nhau 
 .Object) {
nếu (đánh) {hit.mital.emissive.
sethex (hit.currenthex); Không thể
Hit = giao nhau 
 .Object;
Hit.currenthex = hit.mital.emissive.
gethex ();
Hit.material.emissive.sethex (0x00ff00);
Không thể
} other {
if (hit) {hit.material.emissive.sethex
(Hit.currenthex); Không thể
Hit = không xác định;
} 

20. Hoạt hình đối tượng dọc theo quỹ đạo

Tiếp theo, bạn có thể làm động các đối tượng của mình dọc theo đường dẫn quỹ đạo của họ bằng cách sử dụng mã này:

 cho (i = 0; i & lt; = num; i ++) {
var o = đối tượng [i];
o.Rotation.y + =. 01;
if (i% 2 == 0) {
o.Radians + =. 004;
o.radians2 + =. 005;
o.radians3 + =. 008;
} other {
O.Radians - =. 006;
o.radians2 - =. 005;
o.radians3 - =. 003;
Không thể
o.poseition.x = (math.cos (o.radians) *
o.distance);
o.poseition.z = (math.sin (o.radians3) *
o.distance);
o.poseition.y = (math.sin (o.radians2) *
o.Distance * .5);
} 

21. Kết xuất cảnh WebVR

Cuối cùng, bạn có thể hiển thị cảnh của mình bằng các chức năng có thể thực hiện được. Nếu bạn chưa thêm dòng này, hãy làm ngay bây giờ. Khi bạn đã thêm nó, bạn có thể kiểm tra tất cả và sẽ thấy kết xuất cảnh WebVR trong trình duyệt của bạn. Bạn cũng có thể kiểm tra nó trên thiết bị di động hoặc tai nghe VR của bạn.

 // Kết xuất cảnh
renderer.render (cảnh, camera); 

Tài nguyên WebVR

Bắt đầu trong WebVR có thể là quá tải. Chúng tôi đã tập hợp một số ví dụ về các trang web bằng WebVR và tài nguyên để giúp bạn lăn.

Sketchfab.
Bạn có thể đã biết trang web này vì bộ sưu tập tài sản tuyệt vời của nó, nhưng nó cũng có chế độ WebVR cho phép bạn điều hướng trong VR.

Một cái khung
Đây là một khung rock rắn cho AR và VR. Nó xử lý những nỗi đau của dự phòng và hỗ trợ thiết bị cho bạn, bao gồm cả việc cho phép bạn kết xuất trong trình duyệt của mình để thử nghiệm. Nó thậm chí còn trừu tượng hóa việc tạo ra các đối tượng 3D phổ biến.

Ba.js.
Thư viện này có rất nhiều Ví dụ Với mã nguồn để giúp bạn đi với WebVR. Đó là một điểm khởi đầu hoàn hảo.

WebVR.
Vì WebVR là một công nghệ mới nổi, đó là một ý tưởng tốt để theo kịp các phát triển mới nhất. Bạn cần biết những thiết bị nào được hỗ trợ và trong những điều kiện nào. Trang web này sẽ giúp bạn cập nhật. Có một Trang dành riêng cho ví dụ , quá.

Và nó luôn luôn giúp có quyền lưu trữ đám mây , quá.

Bài viết này ban đầu được xuất bản trong số 283 của Tạp chí Thiết kế web sáng tạo Nhà thiết kế web . Mua số 283. hoặc là đăng ký. .

Đọc thêm:

• 7 xu hướng của Bonkers VR hướng theo cách của bạn
• Bắt đầu với Redux Thunk
• 11 xu hướng web nóng ngay bây giờ