这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
orientation
只读特性在
VRPositionState
interface returns the orientation of the sensor at the current
VRPose.timestamp
, as a quarternion value.
The value is a
Float32Array
, made up of the following values:
The orientation yaw (rotation around the y axis) is relative to the initial yaw of the sensor when it was first read or the yaw of the sensor at the point that
VRDisplay.resetPose()
was last called.
var myOrientation = VRPose.orientation;
A
Float32Array
，或
null
if the VR sensor is not able to provide orientation data.
var frameData = new VRFrameData();
var vrDisplay;
navigator.getVRDisplays().then(function(displays) {
vrDisplay = displays[0];
console.log('Display found');
// Starting the presentation when the button is clicked: It can only be called in response to a user gesture
btn.addEventListener('click', function() {
vrDisplay.requestPresent([{ source: canvas }]).then(function() {
drawVRScene();
});
});
});
// WebVR: Draw the scene for the WebVR display.
function drawVRScene() {
// WebVR: Request the next frame of the animation
vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);
// Populate frameData with the data of the next frame to display
vrDisplay.getFrameData(frameData);
// You can get the position, orientation, etc. of the display from the current frame's pose
// curFramePose is a VRPose object
var curFramePose = frameData.pose;
var curPos = curFramePose.position;
var curOrient = curFramePose.orientation;
// Clear the canvas before we start drawing on it.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// WebVR: Create the required projection and view matrix locations needed
// for passing into the uniformMatrix4fv methods below
var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
// WebVR: Render the left eye’s view to the left half of the canvas
gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
drawGeometry();
// WebVR: Render the right eye’s view to the right half of the canvas
gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
drawGeometry();
function drawGeometry() {
// draw the view for each eye
}
...
// WebVR: Indicate that we are ready to present the rendered frame to the VR display
vrDisplay.submitFrame();
}
注意 : You can see this complete code at raw-webgl-example .
注意
: An orientation of
{ x: 0, y: 0, z: 0, w: 1 }
is considered to be "forward".
| 规范 | 状态 | 注释 |
|---|---|---|
|
WebVR 1.1
The definition of 'orientation' in that specification. |
草案 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
orientation
弃用
|
Chrome No | Edge 15 — 79 |
Firefox
55
|
IE No | Opera ? | Safari No | WebView Android No |
Chrome Android
56 — 80
Disabled
|
Firefox Android 55 | Opera Android ? | Safari iOS ? |
Samsung Internet Android
6.0
|
完整支持
不支持
兼容性未知
实验。期望将来行为有所改变。
弃用。不要用于新网站。
见实现注意事项。
用户必须明确启用此特征。