弃用
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the
兼容性表格
at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
WebVR provides support for exposing virtual reality devices — for example, head-mounted displays like the Oculus Rift or HTC Vive — to web apps, enabling developers to translate position and movement information from the display into movement around a 3D scene. This has numerous, interesting applications, from virtual product tours and interactive training apps to immersive first-person games.
Any VR devices attached to your computer will be returned by the
Navigator.getVRDisplays()
method; each one will be represented by a
VRDisplay
对象。
VRDisplay
is the central interface in the WebVR API — via its properties and methods you can access functionality to:
frame data
for each frame of content you you want to present in a display, and submit those frames for display at a consistent rate.
A typical (simple) WebVR app would work like so:
Navigator.getVRDisplays()
is used to get a reference to your VR display.
VRDisplay.requestPresent()
is used to start presenting to the VR display.
VRDisplay.requestAnimationFrame()
method is used to run the app's rendering loop at the correct refresh rate for the display.
VRDisplay.getFrameData()
), draw the displayed scene twice — once for the view in each eye, then submit the rendered view to the display to show to the user (
VRDisplay.submitFrame()
).
In addition, WebVR 1.1 adds a number of events on the
Window
object to allow JavaScript to respond to changes to the status of the display.
注意 : You can find a lot more out about how the API works in our Using the WebVR API and WebVR Concepts articles.
The WebVR API, which was never ratified as a web standard, has been deprecated in favor of the WebXR API , which is well on track toward finishing the standardization process. As such, you should try to update existing code to use the newer API instead. Generally the transition should be fairly painless.
Additionally, on some devices and/or browsers, WebVR requires that the page be loaded using a secure context, over an HTTPS connection. If the page is not fully secure, the WebVR methods and functions will not be available. You can easily test for this by checking to see if the
Navigator
方法
getVRDisplays()
is
NULL
:
if (!navigator.getVRDisplays) {
console.error("WebVR is not available");
} else {
/* Use WebVR */
}
Many WebVR hardware setups feature controllers that go along with the headset. These can be used in WebVR apps via the 手柄 API , and specifically the Gamepad Extensions API that adds API features for accessing controller pose , haptic actuators ，等。
注意 : Our Using VR controllers with WebVR article explains the basics of how to use VR controllers with WebVR apps.
VRDisplay
Represents any VR device supported by this API. It includes generic information such as device IDs and descriptions, as well as methods for starting to present a VR scene, retrieving eye parameters and display capabilities, and other important functionality.
VRDisplayCapabilities
VRDisplay
— it's features can be used to perform VR device capability tests, for example can it return position information.
VRDisplayEvent
VRFrameData
VRDisplay.getFrameData()
.
VRPose
Represents the position state at a given timestamp (which includes orientation, position, velocity, and acceleration.)
VREyeParameters
Provides access to all the information required to correctly render a scene for each given eye, including field of view information.
VRFieldOfView
Represents a field of view defined by 4 different degree values describing the view from a center point.
VRLayerInit
VRDisplay
.
VRStageParameters
Represents the values describing the the stage area for devices that support room-scale experiences.
The WebVR API extends the following APIs, adding the listed features.
Gamepad.displayId
只读
VRDisplay.displayId
of the associated
VRDisplay
— the
VRDisplay
that the gamepad is controlling the displayed scene of.
Navigator.activeVRDisplays
只读
VRDisplay
object that is currently presenting (
VRDisplay.ispresenting
is
true
).
Navigator.getVRDisplays()
VRDisplay
objects representing any available VR displays connected to the computer.
Window.onvrdisplaypresentchange
vrdisplaypresentchange
事件激发)。
Window.onvrdisplayconnect
vrdisplayconnect
事件激发)。
Window.onvrdisplaydisconnect
vrdisplaydisconnect
事件激发)。
Window.onvrdisplayactivate
vrdisplayactivate
event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.
Window.onvrdisplaydeactivate
vrdisplaydeactivate
event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.
Window.onvrdisplayblur
vrdisplayblur
event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.
Window.onvrdisplayfocus
vrdisplayfocus
事件激发)。
You can find a number of examples at these locations:
| 规范 | 状态 | 注释 |
|---|---|---|
| Gamepad Extensions | 编者草案 | 定义 Experimental Gamepad extensions . |
| WebVR 1.1 | 草案 | 初始定义。 |
Navigator.getVRDisplays
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
getVRDisplays
弃用
|
Chrome
不支持
No
注意事项
|
Edge 不支持 15 — 79 |
Firefox
55
注意事项
|
IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 ? — 80 |
Chrome Android
不支持
? — 80
注意事项
|
Firefox Android 55 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
实验。期望将来行为有所改变。
弃用。不要用于新网站。
见实现注意事项。