WebVR API
WebVR API 能为虚拟现实设备的渲染提供支持 — 例如像 Oculus Rift 或者HTC Vive 这样的头戴式设备与 Web apps 的连接。它能让开发者将位置和动作信息转换成 3D 场景中的运动。基于这项技术能产生很多有趣的应用,比如虚拟的产品展示,可交互的培训课程,以及超强沉浸感的第一人称游戏。
概念及使用方法
【K】
Any VR devices attached to your computer will be returned by the Navigator.getVRDevices()
(en-US) method. This returns an array of objects to represent the attached devices, which inherit from the general VRDevice
(en-US) object — generally a head mounted display will have two devices — the head mounted display itself, represented by HMDVRDevice
(en-US), and a position sensor camera that keeps track of your head position, represented by PositionSensorVRDevice
(en-US).
连接到电脑的所有 VR 设备都将由 Navigator.getVRDevices()
(en-US) 方法返回。这个方法将返回一个包含了所有已连接设备的对象数组,每个设备对应一个对象,该对象继承自 VRDevice
(en-US) — 通常一个头显将包含两个设备 — 头显自身由 HMDVRDevice
(en-US) 表示,和一个跟踪头部位置的位置捕捉传感器,由 PositionSensorVRDevice
(en-US) 表示。
The PositionSensorVRDevice
(en-US) object contains the getState()
(en-US) method, which returns a VRPositionState
(en-US) 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.
PositionSensorVRDevice
(en-US) 对象有一个 getState()
(en-US) 方法,该方法返回一个VRPositionState
(en-US) 对象 — 这个对象代表位置传感器在指定时刻的状态,包含了一些十分有用的信息,例如速度、加速度以及运动方向,可用于根据头部运动刷新画面显示。
The HMDVRDevice.getEyeParameters()
(en-US) method returns a VREyeParameters
(en-US) object, which can be used to return field of view information — how much of the scene the head mounted display can see. The VREyeParameters.currentFieldOfView
(en-US) returns a VRFieldOfView
(en-US) object that contains 4 angles describing the current view from a center point. You can also change the field of view using HMDVRDevice.setFieldOfView()
(en-US).
HMDVRDevice.getEyeParameters()
(en-US) 方法返回一个 VREyeParameters
(en-US) 对象,可用于获取显示区域的信息 — 头显可以看到多少画面。 VREyeParameters.currentFieldOfView
(en-US) 返回一个 VRFieldOfView
(en-US) 对象,该对象包含了 4 个角度信息来描述当前的显示区域。你可以用 HMDVRDevice.setFieldOfView()
(en-US) 来改变当前的显示区域。
备注: To find out more about using these interfaces in your own app, read Using the WebVR API. To learn more about the basic concepts behind VR, read WebVR concepts.
注释:要了解更多关于如何在你的应用程序中使用这些接口,请阅读文章Using the WebVR API. 要学习更多关于 VR 技术背后的基础概念,请阅读文章 WebVR concepts.
Using controllers: Combining WebVR with the Gamepad API
使用控制器:将 WebVR 与 Gamepad API 相结合
Many WebVR hardware setups feature controllers that go along with the headset. These can be used in WebVR apps via the Gamepad API, and specifically the Gamepad Extensions API that adds API features for accessing controller pose, haptic actuators (en-US), and more.
备注: Our Using VR controllers with WebVR article explains the basics of how to use VR controllers with WebVR apps.
WebVR 接口
-
Returns a promise that resolves to an array of objects representing the VR devices attached to the computer. 返回一个 Promise 对象,并通过 resolve 方式返回参数,参数为链接到电脑的 VR 设备数组。
VRDevice
(en-US)-
A generic VR device, includes information such as device IDs and descriptions. Inherited by
HMDVRDevice
andPositionSensorVRDevice
. 返回一个包括了 VR 设备 IDs,描述等信息的类。HMDVRDevice 和 PositionSensorVRDevice 继承了 VRDevice。 HMDVRDevice
(en-US)-
Represents a head mounted display, providing access to information about each eye, and the current field of view. 头戴设备。提供设备双眼、当前 FOV(field of view)信息。
PositionSensorVRDevice
(en-US)-
Represents the position sensor for the VR hardware, allowing access to information such as position and orientation. VR 设备的位置传感器。获取位置、方向信息。
VRPose
-
Represents the position state at a given timestamp (which includes orientation, position, velocity, and acceleration.) 根据一个时间戳返回包括(方向、位置、速度、加速度)的状态。
VREyeParameters
(en-US)-
Provides access to all the information required to correctly render a scene for each given eye, including field of view information. 给双眼提供正确渲染场景的所有信息,包括 FOV。
VRFieldOfView
(en-US)-
Represents a field of view defined by 4 different degree values describing the view from a center point. 返回以视窗的中心点为基点的,表示 FOV 的 4 个角度值(downDegrees, leftDegrees, rightDegrees, upDegrees)。
VRFieldOfViewReadOnly
-
Contains the raw definition for the degree value properties required to define a field of view. Inherited by
VRFieldOfView
. 定义一个 FOV 必须的角度属性。VRFieldOfView 继承了 VRFieldOfViewReadOnly。
示例
【K】
You can find a number of examples at these Github repos:
你可以在 Github 的协议中找到一系列的案例:
- mdn/webvr-tests: Simple demos built to illiustrate basic feature usage.
- mdn/webvr-tests: 简单构建的 demos 用于阐明基本的使用方法。
- MozVR team: More advanced demos, the WebVR spec source, and more!
- MozVR team: 更多复杂的 demos,关于 WebVR 特别的资源,以及更多的内容!
- 【K】
规范
该 API 在旧的 WebVR API(已被 WebXR Device API 取代)中定义。它不再有望成为标准。
在所有浏览器都实现新的 WebXR API (en-US) 之前,建议使用框架(如:A-Frame、Babylon.js 或 Three.js)或 polyfill 来开发适用于所有浏览器的 WebXR 应用程序。
浏览器兼容性
BCD tables only load in the browser
相关文章
- WebVR environment setup
- 建立 WEBVR 的运行环境。
- WebVR concepts
- WEBVR 的相关概念。
- Using the WebVR API
- 怎样使用 WEBVR API。
- MozVr.com — demos, downloads, and other resources from the Mozilla VR team.
- MozVr.com — demos,下载,以及其他的来自 MOZILLA VR 团队的资源。
- Console Game on Web — a collection of interesting game concept demos, some of which include WebVR.
- Console Game on Web — 一系列有趣的概念游戏 DEMO 的收集,其中有些包括了 WEBVR。
- threejs-vr-boilerplate — a very useful starter template for writing WebVR apps into.
- threejs-vr-boilerplate — 一个当你编写 WEBVR APP 时,非常有用的用于开始编程的模板。
- Oculus Rift homepage
- Oculus Rift 主页