1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
---
title: WebVR API
slug: Web/API/WebVR_API
tags:
- API
- VR
- WebVR
- 虚拟现实
translation_of: Web/API/WebVR_API
---
<div>{{DefaultAPISidebar("WebVR API")}}{{SeeCompatTable}}</div>
<p class="summary"><strong>WebVR API 能为虚拟现实设备的渲染提供支持 — 例如像Oculus Rift或者</strong>HTC Vive <strong>这样的头戴式设备与 Web apps 的连接。它能让开发者将位置和动作信息转换成3D场景中的运动。基于这项技术能产生很多有趣的应用, 比如虚拟的产品展示，可交互的培训课程，以及超强沉浸感的第一人称游戏。</strong></p>
<h2 id="概念及使用方法">概念及使用方法</h2>
<p><strong>【K】</strong></p>
<p><img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png" style="display: block; height: 78px; margin: 0px auto; width: 60%;"></p>
<p>Any VR devices attached to your computer will be returned by the {{domxref("Navigator.getVRDevices()")}} method. This returns an array of objects to represent the attached devices, which inherit from the general {{domxref("VRDevice")}} object — generally a head mounted display will have two devices — the head mounted display itself, represented by {{domxref("HMDVRDevice")}}, and a position sensor camera that keeps track of your head position, represented by {{domxref("PositionSensorVRDevice")}}.</p>
<p><strong>连接到电脑的所有VR设备都将由 {{domxref("Navigator.getVRDevices()")}} 方法返回。 这个方法将返回一个包含了所有已连接设备的对象数组，每个设备对应一个对象， 该对象继承自 {{domxref("VRDevice")}} — 通常一个头显将包含两个设备 — 头显自身由 {{domxref("HMDVRDevice")}} 表示， 和一个跟踪头部位置的位置捕捉传感器，由 {{domxref("PositionSensorVRDevice")}} 表示。</strong></p>
<p>The {{domxref("PositionSensorVRDevice")}} object contains the {{domxref("PositionSensorVRDevice.getState","getState()")}} method, which returns a {{domxref("VRPositionState")}} object — this represents the sensor’s state at a given timestamp, and includes properties containing useful data such as current velocity, acceleration, and orientation, useful for updating the rendering of a scene on each frame according to the movement of the VR head mounted display.</p>
<p><strong>{{domxref("PositionSensorVRDevice")}} 对象有一个 {{domxref("PositionSensorVRDevice.getState","getState()")}} 方法, 该方法返回一个{{domxref("VRPositionState")}} 对象 — 这个对象代表位置传感器在指定时刻的状态，包含了一些十分有用的信息，例如速度、加速度以及运动方向，可用于根据头部运动刷新画面显示。</strong></p>
<p>The {{domxref("HMDVRDevice.getEyeParameters()")}} method returns a {{domxref("VREyeParameters")}} object, which can be used to return field of view information — how much of the scene the head mounted display can see. The {{domxref("VREyeParameters.currentFieldOfView")}} returns a {{domxref("VRFieldOfView")}} object that contains 4 angles describing the current view from a center point. You can also change the field of view using {{domxref("HMDVRDevice.setFieldOfView()")}}.</p>
<p><strong>{{domxref("HMDVRDevice.getEyeParameters()")}} 方法返回一个 {{domxref("VREyeParameters")}} 对象, 可用于获取显示区域的信息 — 头显可以看到多少画面。 {{domxref("VREyeParameters.currentFieldOfView")}} 返回一个 {{domxref("VRFieldOfView")}} 对象 ，该对象包含了4个角度信息来描述当前的显示区域. 你可以用 {{domxref("HMDVRDevice.setFieldOfView()")}} 来改变当前的显示区域。</strong></p>
<p> </p>
<div class="note">
<p><strong>Note</strong>: To find out more about using these interfaces in your own app, read <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a>. To learn more about the basic concepts behind VR, read <a href="/en-US/docs/Web/API/WebVR_API/WebVR_concepts">WebVR concepts</a>.</p>
<p><u><strong>注释：</strong>: 要了解更多关于如何在你的应用程序中使用这些接口，请阅读文章<a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a>. 要学习更多关于VR技术背后的基础概念，请阅读文章 <a href="/en-US/docs/Web/API/WebVR_API/WebVR_concepts">WebVR concepts</a>.</u></p>
</div>
<h3 id="Using_controllers_Combining_WebVR_with_the_Gamepad_API">Using controllers: Combining WebVR with the Gamepad API </h3>
<h3 id="使用控制器：将WebVR与Gamepad_API相结合">使用控制器：将WebVR与Gamepad API相结合</h3>
<p>Many WebVR hardware setups feature controllers that go along with the headset. These can be used in WebVR apps via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API">Gamepad API</a>, and specifically the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Gamepad Extensions API</a> that adds API features for accessing <a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadPose">controller pose</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator">haptic actuators</a>, and more.</p>
<div class="note"><strong>Note</strong>: Our <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API/Using_VR_controllers_with_WebVR">Using VR controllers with WebVR</a> article explains the basics of how to use VR controllers with WebVR apps.
<p> </p>
</div>
<h2 id="WebVR接口">WebVR接口</h2>
<dl>
<dt>{{domxref("Navigator.getVRDevices")}}</dt>
<dd>Returns a promise that resolves to an array of objects representing the VR devices attached to the computer.<br>
<strong>返回一个Promise对象，并通过resolve方式返回参数，参数为链接到电脑的VR设备数组。</strong></dd>
<dt>{{domxref("VRDevice")}}</dt>
<dd>A generic VR device, includes information such as device IDs and descriptions. Inherited by <code>HMDVRDevice</code> and <code>PositionSensorVRDevice</code>.<br>
<strong>返回一个包括了VR设备IDs，描述等信息的类。HMDVRDevice 和 PositionSensorVRDevice 继承了 VRDevice。</strong></dd>
<dt>{{domxref("HMDVRDevice")}}</dt>
<dd>Represents a head mounted display, providing access to information about each eye, and the current field of view.<br>
<strong>头戴设备。提供设备双眼、当前FOV（field of view）信息。</strong></dd>
<dt>{{domxref("PositionSensorVRDevice")}}</dt>
<dd>Represents the position sensor for the VR hardware, allowing access to information such as position and orientation.<br>
<strong>VR设备的位置传感器。获取位置、方向信息。</strong></dd>
<dt>{{domxref("VRPose")}}</dt>
<dd>Represents the position state at a given timestamp (which includes orientation, position, velocity, and acceleration.)<br>
<strong>根据一个时间戳返回包括（方向、位置、速度、加速度）的状态。</strong></dd>
<dt>{{domxref("VREyeParameters")}}</dt>
<dd>Provides access to all the information required to correctly render a scene for each given eye, including field of view information.<br>
<strong>给双眼提供正确渲染场景的所有信息，包括FOV。</strong></dd>
<dt>{{domxref("VRFieldOfView")}}</dt>
<dd>Represents a field of view defined by 4 different degree values describing the view from a center point.<br>
<strong>返回以视窗的中心点为基点的，表示FOV的4个角度值（downDegrees, leftDegrees, rightDegrees, upDegrees）。</strong></dd>
<dt>{{domxref("VRFieldOfViewReadOnly")}}</dt>
<dd>Contains the raw definition for the degree value properties required to define a field of view. Inherited by <code>VRFieldOfView</code>.<br>
<strong>定义一个FOV必须的角度属性。VRFieldOfView 继承了 VRFieldOfViewReadOnly。</strong></dd>
</dl>
<h2 id="示例">示例</h2>
<p><strong>【K】</strong></p>
<p>You can find a number of examples at these Github repos:</p>
<p><strong>你可以在Github的协议中找到一系列的案例：</strong></p>
<ul>
<li><a href="https://github.com/mdn/webvr-tests">mdn/webvr-tests</a>: Simple demos built to illiustrate basic feature usage.</li>
<li><strong><a href="https://github.com/mdn/webvr-tests">mdn/webvr-tests</a>: 简单构建的demos用于阐明基本的使用方法。</strong></li>
<li> </li>
<li><a href="https://github.com/MozVR/">MozVR team</a>: More advanced demos, the WebVR spec source, and more!</li>
<li><strong><a href="https://github.com/MozVR/">MozVR team</a>: 更多复杂的demos,关于WebVR特别的资源，以及更多的内容！</strong></li>
<li><strong>【K】</strong></li>
</ul>
<h2 id="规范">规范</h2>
<p><strong>【K】</strong></p>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('WebVR')}}</td>
<td>
<p>{{Spec2('WebVR')}}</p>
<p><strong>草稿阶段</strong></p>
</td>
<td>
<p>Initial definition</p>
<p><strong>最初的定义</strong></p>
</td>
</tr>
</tbody>
</table>
<p><strong>【K】</strong></p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
{{Compat("api.Navigator.getVRDisplays")}}
<h2 id="相关文章">相关文章</h2>
<ul>
<li><a href="/en-US/docs/Web/API/WebVR_API/WebVR_environment_setup">WebVR environment setup</a></li>
<li><strong>建立WEBVR的运行环境。</strong></li>
<li><a href="/en-US/docs/Web/API/WebVR_API/WebVR_concepts">WebVR concepts</a></li>
<li><strong>WEBVR 的相关概念。</strong></li>
<li><a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a></li>
<li><strong>怎样使用WEBVR API。</strong></li>
<li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
<li><strong><a href="http://mozvr.com/">MozVr.com</a> — demos，下载，以及其他的来自MOZILLA VR团队的资源。</strong></li>
<li><a href="http://dsmu.me/ConsoleGameOnWeb/">Console Game on Web</a> — a collection of interesting game concept demos, some of which include WebVR.</li>
<li><strong><a href="http://dsmu.me/ConsoleGameOnWeb/">Console Game on Web</a> — 一系列有趣的概念游戏DEMO的收集，其中有些包括了WEBVR。</strong></li>
<li><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a> — a very useful starter template for writing WebVR apps into.</li>
<li><strong><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a> — 一个当你编写WEBVR APP时，非常有用的用于开始编程的模板。</strong></li>
<li><a href="https://developer.oculus.com/">Oculus Rift homepage</a> </li>
<li><strong><a href="https://developer.oculus.com/">Oculus Rift</a> </strong><strong>主页</strong></li>
</ul>
|
