在此页

• 句法
• 用法注意事项
• 范例
• 规范
• 浏览器兼容性
• 相关话题

只读 XRRigidTransform property matrix returns the transform matrix represented by the object. The returned matrix can then be premultiplied with a column vector to rotate the vector by the 3D rotation specified by the orientation , then translate it by the 位置 .

句法

let matrix = xrRigidTransform.matrix;
					

值

A Float32Array containing 16 entries which represents the 4x4 transform matrix which is described by the 位置 and orientation 特性。

用法注意事项

Matrix format

All 4x4 transform matrices used in WebGL are stored in 16-element Float32Array s. The values are stored into the array in column-major order; that is, each column is written into the array top-down before moving to the right one column and writing the next column into the array. Thus, for an array [a0, a1, a2, ..., a13, a14, a15], the matrix looks like this:

$$\begin{bmatrix} a[0] & a[4] & a[8] & a[12]\\ a[1] & a[5] & a[9] & a[13]\\ a[2] & a[6] & a[10] & a[14]\\ a[3] & a[7] & a[11] & a[15]\\ \end{bmatrix}$$

The first time matrix is requested, it gets computed; after that, it's should be cached to avoid slowing down to compute it every time you need it.

Creating the matrix

In this section, intended for more advanced readers, we cover how the API calculates the matrix for the specified transform. It begins by allocating a new matrix and writing a 4x4 identity matrix into it:

$$\begin{bmatrix} 1 & 0 & 0 & 0\\ 0 & 1 & 0 & 0\\ 0 & 0 & 1 & 0\\ 0 & 0 & 0 & 1 \end{bmatrix}$$

This is a transform that will not change either the orientation or position of any point, vector, or object to which it's applied.

Next, the 位置 is placed into the right-hand column, like this, resulting in a translation matrix that will transform a coordinate system by the specified distance in each dimension, with no rotational change. Here p x , p y ，和 p z are the values of the x , y ，和 z members of the DOMPointReadOnly 位置 .

$$\begin{bmatrix} 1 & 0 & 0 & x\\ 0 & 1 & 0 & y\\ 0 & 0 & 1 & z\\ 0 & 0 & 0 & 1 \end{bmatrix}$$

Then a rotation matrix is created by computing a column-vector rotation matrix from the unit quaternion specified by orientation :

$$\begin{bmatrix} 1 - 2(q_y^2 + q_z^2) & 2(q_xq_y - q_zq_w) & 2(q_xq_z + q_yq_w) & p_x\\ 2(q_xq_y + q_zq_w) & 1 - 2(q_x^2 + q_z^2) & 2(q_yq_z - q_xq_w) & p_y\\ 2(q_xq_z - q_yq_w) & 2(q_yq_z + q_xq_w) & 1 - 2(q_x^2 + q_y^2) & p_z\\ 0 & 0 & 0 & 1 \end{bmatrix}$$

The final transform matrix is calculated by multiplying the translation matrix by the rotation matrix, in the order (translation * rotation) . This yields the final transform matrix as returned by matrix :

$$\begin{bmatrix} 1 - 2(q_y^2 + q_z^2) & 2(q_xq_y - q_zq_w) & 2(q_xq_z + q_yq_w) & p_x\\ 2(q_xq_y + q_zq_w) & 1 - 2(q_x^2 + q_z^2) & 2(q_yq_z - q_xq_w) & p_y\\ 2(q_xq_z - q_yq_w) & 2(q_yq_z + q_xq_w) & 1 - 2(q_x^2 + q_y^2) & p_z\\ 0 & 0 & 0 & 1 \end{bmatrix}$$

范例

In this example, a transform is created to create a matrix which can be used as a transform during rendering of WebGL objects, in order to place objects to match a given offset and orientation. The matrix is then passed into a library function that uses WebGL to render an object matching a given name using the transform matrix specified to position and orient it.

let transform = new XRRigidTransform(
                      {x: 0, y: 0.5, z: 0.5},
                      {x: 0, y: -0.5, z: -0.5, w: 1});
drawGLObject("magic-lamp", transform.matrix);
					

规范

规范	状态	注释
WebXR 设备 API The definition of 'XRRigidTransform.matrix' in that specification.	工作草案	初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
matrix	Chrome 79	Edge 79	Firefox 不支持 No	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 79	Firefox Android 不支持 No	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 11.2

图例

完整支持

完整支持

不支持

不支持

元数据

• 最后修改： Dec 11, 2019