WebXRManager.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>WebXRManager - Three.js Docs</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <script src="../scripts/highlight.min.js"></script>
  8. <link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
  9. <link type="text/css" rel="stylesheet" href="../styles/page.css">
  10. </head>
  11. <body>
  12. <p class="inheritance" translate="no"><a href="EventDispatcher.html">EventDispatcher</a> → </p>
  13. <h1 translate="no">WebXRManager</h1>
  14. <section>
  15. <header>
  16. <div class="class-description"><p>This class represents an abstraction of the WebXR Device API and is
  17. internally used by <a href="WebGLRenderer.html">WebGLRenderer</a>. <code>WebXRManager</code> also provides a public
  18. interface that allows users to enable/disable XR and perform XR related
  19. tasks like for instance retrieving controllers.</p></div>
  20. </header>
  21. <article>
  22. <div class="container-overview">
  23. <div class="method">
  24. </div>
  25. </div>
  26. <h2 class="subsection-title">Properties</h2>
  27. <div class="member">
  28. <h3 class="name" id="cameraAutoUpdate" translate="no">.<a href="#cameraAutoUpdate">cameraAutoUpdate</a><span class="type-signature"> : boolean</span> </h3>
  29. <div class="description">
  30. <p>Whether the manager's XR camera should be automatically updated or not.</p>
  31. <p>Default is <code>true</code>.</p>
  32. </div>
  33. </div>
  34. <div class="member">
  35. <h3 class="name" id="enabled" translate="no">.<a href="#enabled">enabled</a><span class="type-signature"> : boolean</span> </h3>
  36. <div class="description">
  37. <p>This flag notifies the renderer to be ready for XR rendering. Set it to <code>true</code>
  38. if you are going to use XR in your app.</p>
  39. <p>Default is <code>false</code>.</p>
  40. </div>
  41. </div>
  42. <div class="member">
  43. <h3 class="name" id="isPresenting" translate="no">.<a href="#isPresenting">isPresenting</a><span class="type-signature"> : boolean</span> <span class="type-signature">(readonly) </span></h3>
  44. <div class="description">
  45. <p>Whether XR presentation is active or not.</p>
  46. <p>Default is <code>false</code>.</p>
  47. </div>
  48. </div>
  49. <h2 class="subsection-title">Methods</h2>
  50. <h3 class="name name-method" id="getBaseLayer" translate="no">.<a href="#getBaseLayer">getBaseLayer</a><span class="signature">()</span><span class="type-signature"> : XRWebGLLayer | XRProjectionLayer</span> </h3>
  51. <div class="method">
  52. <div class="description">
  53. <p>Returns the current base layer.</p>
  54. <p>This is an <code>XRProjectionLayer</code> when the targeted XR device supports the
  55. WebXR Layers API, or an <code>XRWebGLLayer</code> otherwise.</p>
  56. </div>
  57. <dl class="details">
  58. <dt class="tag-returns"><strong>Returns:</strong> The XR base layer.</dt>
  59. </dl>
  60. </div>
  61. <h3 class="name name-method" id="getBinding" translate="no">.<a href="#getBinding">getBinding</a><span class="signature">()</span><span class="type-signature"> : XRWebGLBinding</span> </h3>
  62. <div class="method">
  63. <div class="description">
  64. <p>Returns the current XR binding.</p>
  65. <p>Creates a new binding if needed and the browser is
  66. capable of doing so.</p>
  67. </div>
  68. <dl class="details">
  69. <dt class="tag-returns"><strong>Returns:</strong> The XR binding. Returns <code>null</code> if one cannot be created.</dt>
  70. </dl>
  71. </div>
  72. <h3 class="name name-method" id="getCamera" translate="no">.<a href="#getCamera">getCamera</a><span class="signature">()</span><span class="type-signature"> : <a href="ArrayCamera.html">ArrayCamera</a></span> </h3>
  73. <div class="method">
  74. <div class="description">
  75. <p>Returns an instance of <a href="ArrayCamera.html">ArrayCamera</a> which represents the XR camera
  76. of the active XR session. For each view it holds a separate camera object.</p>
  77. <p>The camera's <code>fov</code> is currently not used and does not reflect the fov of
  78. the XR camera. If you need the fov on app level, you have to compute in
  79. manually from the XR camera's projection matrices.</p>
  80. </div>
  81. <dl class="details">
  82. <dt class="tag-returns"><strong>Returns:</strong> The XR camera.</dt>
  83. </dl>
  84. </div>
  85. <h3 class="name name-method" id="getCameraTexture" translate="no">.<a href="#getCameraTexture">getCameraTexture</a><span class="signature">( xrCamera : <span class="param-type">XRCamera</span> )</span><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  86. <div class="method">
  87. <div class="description">
  88. <p>Retrieves an opaque texture from the view-aligned XRCamera.
  89. Only available during the current animation loop.</p>
  90. </div>
  91. <table class="params">
  92. <tbody>
  93. <tr>
  94. <td class="name">
  95. <strong>xrCamera</strong>
  96. </td>
  97. <td class="description last">
  98. <p>The camera to query.</p>
  99. </td>
  100. </tr>
  101. </tbody>
  102. </table>
  103. <dl class="details">
  104. <dt class="tag-returns"><strong>Returns:</strong> An opaque texture representing the current raw camera frame.</dt>
  105. </dl>
  106. </div>
  107. <h3 class="name name-method" id="getController" translate="no">.<a href="#getController">getController</a><span class="signature">( index : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Group.html">Group</a></span> </h3>
  108. <div class="method">
  109. <div class="description">
  110. <p>Returns a group representing the <code>target ray</code> space of the XR controller.
  111. Use this space for visualizing 3D objects that support the user in pointing
  112. tasks like UI interaction.</p>
  113. </div>
  114. <table class="params">
  115. <tbody>
  116. <tr>
  117. <td class="name">
  118. <strong>index</strong>
  119. </td>
  120. <td class="description last">
  121. <p>The index of the controller.</p>
  122. </td>
  123. </tr>
  124. </tbody>
  125. </table>
  126. <dl class="details">
  127. <dt class="tag-returns"><strong>Returns:</strong> A group representing the <code>target ray</code> space.</dt>
  128. </dl>
  129. </div>
  130. <h3 class="name name-method" id="getControllerGrip" translate="no">.<a href="#getControllerGrip">getControllerGrip</a><span class="signature">( index : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Group.html">Group</a></span> </h3>
  131. <div class="method">
  132. <div class="description">
  133. <p>Returns a group representing the <code>grip</code> space of the XR controller.
  134. Use this space for visualizing 3D objects that support the user in pointing
  135. tasks like UI interaction.</p>
  136. <p>Note: If you want to show something in the user's hand AND offer a
  137. pointing ray at the same time, you'll want to attached the handheld object
  138. to the group returned by <code>getControllerGrip()</code> and the ray to the
  139. group returned by <code>getController()</code>. The idea is to have two
  140. different groups in two different coordinate spaces for the same WebXR
  141. controller.</p>
  142. </div>
  143. <table class="params">
  144. <tbody>
  145. <tr>
  146. <td class="name">
  147. <strong>index</strong>
  148. </td>
  149. <td class="description last">
  150. <p>The index of the controller.</p>
  151. </td>
  152. </tr>
  153. </tbody>
  154. </table>
  155. <dl class="details">
  156. <dt class="tag-returns"><strong>Returns:</strong> A group representing the <code>grip</code> space.</dt>
  157. </dl>
  158. </div>
  159. <h3 class="name name-method" id="getDepthSensingMesh" translate="no">.<a href="#getDepthSensingMesh">getDepthSensingMesh</a><span class="signature">()</span><span class="type-signature"> : <a href="Mesh.html">Mesh</a></span> </h3>
  160. <div class="method">
  161. <div class="description">
  162. <p>Returns the depth sensing mesh.</p>
  163. <p>See <a href="WebXRDepthSensing.html#getMesh">WebXRDepthSensing#getMesh</a>.</p>
  164. </div>
  165. <dl class="details">
  166. <dt class="tag-returns"><strong>Returns:</strong> The depth sensing mesh.</dt>
  167. </dl>
  168. </div>
  169. <h3 class="name name-method" id="getDepthTexture" translate="no">.<a href="#getDepthTexture">getDepthTexture</a><span class="signature">()</span><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  170. <div class="method">
  171. <div class="description">
  172. <p>Returns the current depth texture computed via depth sensing.</p>
  173. <p>See <a href="WebXRDepthSensing.html#getDepthTexture">WebXRDepthSensing#getDepthTexture</a>.</p>
  174. </div>
  175. <dl class="details">
  176. <dt class="tag-returns"><strong>Returns:</strong> The depth texture.</dt>
  177. </dl>
  178. </div>
  179. <h3 class="name name-method" id="getEnvironmentBlendMode" translate="no">.<a href="#getEnvironmentBlendMode">getEnvironmentBlendMode</a><span class="signature">()</span><span class="type-signature"> : 'opaque' | 'additive' | 'alpha-blend' | undefined</span> </h3>
  180. <div class="method">
  181. <div class="description">
  182. <p>Returns the environment blend mode from the current XR session.</p>
  183. </div>
  184. <dl class="details">
  185. <dt class="tag-returns"><strong>Returns:</strong> The environment blend mode. Returns <code>undefined</code> when used outside of a XR session.</dt>
  186. </dl>
  187. </div>
  188. <h3 class="name name-method" id="getFoveation" translate="no">.<a href="#getFoveation">getFoveation</a><span class="signature">()</span><span class="type-signature"> : number | undefined</span> </h3>
  189. <div class="method">
  190. <div class="description">
  191. <p>Returns the amount of foveation used by the XR compositor for the projection layer.</p>
  192. </div>
  193. <dl class="details">
  194. <dt class="tag-returns"><strong>Returns:</strong> The amount of foveation.</dt>
  195. </dl>
  196. </div>
  197. <h3 class="name name-method" id="getFrame" translate="no">.<a href="#getFrame">getFrame</a><span class="signature">()</span><span class="type-signature"> : XRFrame</span> </h3>
  198. <div class="method">
  199. <div class="description">
  200. <p>Returns the current XR frame.</p>
  201. </div>
  202. <dl class="details">
  203. <dt class="tag-returns"><strong>Returns:</strong> The XR frame. Returns <code>null</code> when used outside a XR session.</dt>
  204. </dl>
  205. </div>
  206. <h3 class="name name-method" id="getHand" translate="no">.<a href="#getHand">getHand</a><span class="signature">( index : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Group.html">Group</a></span> </h3>
  207. <div class="method">
  208. <div class="description">
  209. <p>Returns a group representing the <code>hand</code> space of the XR controller.
  210. Use this space for visualizing 3D objects that support the user in pointing
  211. tasks like UI interaction.</p>
  212. </div>
  213. <table class="params">
  214. <tbody>
  215. <tr>
  216. <td class="name">
  217. <strong>index</strong>
  218. </td>
  219. <td class="description last">
  220. <p>The index of the controller.</p>
  221. </td>
  222. </tr>
  223. </tbody>
  224. </table>
  225. <dl class="details">
  226. <dt class="tag-returns"><strong>Returns:</strong> A group representing the <code>hand</code> space.</dt>
  227. </dl>
  228. </div>
  229. <h3 class="name name-method" id="getReferenceSpace" translate="no">.<a href="#getReferenceSpace">getReferenceSpace</a><span class="signature">()</span><span class="type-signature"> : XRReferenceSpace</span> </h3>
  230. <div class="method">
  231. <div class="description">
  232. <p>Returns the XR reference space.</p>
  233. </div>
  234. <dl class="details">
  235. <dt class="tag-returns"><strong>Returns:</strong> The XR reference space.</dt>
  236. </dl>
  237. </div>
  238. <h3 class="name name-method" id="getSession" translate="no">.<a href="#getSession">getSession</a><span class="signature">()</span><span class="type-signature"> : XRSession</span> </h3>
  239. <div class="method">
  240. <div class="description">
  241. <p>Returns the current XR session.</p>
  242. </div>
  243. <dl class="details">
  244. <dt class="tag-returns"><strong>Returns:</strong> The XR session. Returns <code>null</code> when used outside a XR session.</dt>
  245. </dl>
  246. </div>
  247. <h3 class="name name-method" id="hasDepthSensing" translate="no">.<a href="#hasDepthSensing">hasDepthSensing</a><span class="signature">()</span><span class="type-signature"> : boolean</span> </h3>
  248. <div class="method">
  249. <div class="description">
  250. <p>Returns <code>true</code> if depth sensing is supported.</p>
  251. </div>
  252. <dl class="details">
  253. <dt class="tag-returns"><strong>Returns:</strong> Whether depth sensing is supported or not.</dt>
  254. </dl>
  255. </div>
  256. <h3 class="name name-method" id="setFoveation" translate="no">.<a href="#setFoveation">setFoveation</a><span class="signature">( value : <span class="param-type">number</span> )</span> </h3>
  257. <div class="method">
  258. <div class="description">
  259. <p>Sets the foveation value.</p>
  260. </div>
  261. <table class="params">
  262. <tbody>
  263. <tr>
  264. <td class="name">
  265. <strong>value</strong>
  266. </td>
  267. <td class="description last">
  268. <p>A number in the range <code>[0,1]</code> where <code>0</code> means no foveation (full resolution)
  269. and <code>1</code> means maximum foveation (the edges render at lower resolution).</p>
  270. </td>
  271. </tr>
  272. </tbody>
  273. </table>
  274. </div>
  275. <h3 class="name name-method" id="setFramebufferScaleFactor" translate="no">.<a href="#setFramebufferScaleFactor">setFramebufferScaleFactor</a><span class="signature">( value : <span class="param-type">number</span> )</span> </h3>
  276. <div class="method">
  277. <div class="description">
  278. <p>Sets the framebuffer scale factor.</p>
  279. <p>This method can not be used during a XR session.</p>
  280. </div>
  281. <table class="params">
  282. <tbody>
  283. <tr>
  284. <td class="name">
  285. <strong>value</strong>
  286. </td>
  287. <td class="description last">
  288. <p>The framebuffer scale factor.</p>
  289. </td>
  290. </tr>
  291. </tbody>
  292. </table>
  293. </div>
  294. <h3 class="name name-method" id="setReferenceSpace" translate="no">.<a href="#setReferenceSpace">setReferenceSpace</a><span class="signature">( space : <span class="param-type">XRReferenceSpace</span> )</span> </h3>
  295. <div class="method">
  296. <div class="description">
  297. <p>Sets a custom XR reference space.</p>
  298. </div>
  299. <table class="params">
  300. <tbody>
  301. <tr>
  302. <td class="name">
  303. <strong>space</strong>
  304. </td>
  305. <td class="description last">
  306. <p>The XR reference space.</p>
  307. </td>
  308. </tr>
  309. </tbody>
  310. </table>
  311. </div>
  312. <h3 class="name name-method" id="setReferenceSpaceType" translate="no">.<a href="#setReferenceSpaceType">setReferenceSpaceType</a><span class="signature">( value : <span class="param-type">string</span> )</span> </h3>
  313. <div class="method">
  314. <div class="description">
  315. <p>Sets the reference space type. Can be used to configure a spatial relationship with the user's physical
  316. environment. Depending on how the user moves in 3D space, setting an appropriate reference space can
  317. improve tracking. Default is <code>local-floor</code>. Valid values can be found here
  318. https://developer.mozilla.org/en-US/docs/Web/API/XRReferenceSpace#reference_space_types.</p>
  319. <p>This method can not be used during a XR session.</p>
  320. </div>
  321. <table class="params">
  322. <tbody>
  323. <tr>
  324. <td class="name">
  325. <strong>value</strong>
  326. </td>
  327. <td class="description last">
  328. <p>The reference space type.</p>
  329. </td>
  330. </tr>
  331. </tbody>
  332. </table>
  333. </div>
  334. <h3 class="name name-method" id="setSession" translate="no">.<a href="#setSession">setSession</a><span class="signature">( value : <span class="param-type">XRSession</span> )</span><span class="type-signature"> : Promise</span> <span class="type-signature">(async) </span></h3>
  335. <div class="method">
  336. <div class="description">
  337. <p>After a XR session has been requested usually with one of the <code>*Button</code> modules, it
  338. is injected into the renderer with this method. This method triggers the start of
  339. the actual XR rendering.</p>
  340. </div>
  341. <table class="params">
  342. <tbody>
  343. <tr>
  344. <td class="name">
  345. <strong>value</strong>
  346. </td>
  347. <td class="description last">
  348. <p>The XR session to set.</p>
  349. </td>
  350. </tr>
  351. </tbody>
  352. </table>
  353. <dl class="details">
  354. <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolves when the session has been set.</dt>
  355. </dl>
  356. </div>
  357. <h3 class="name name-method" id="updateCamera" translate="no">.<a href="#updateCamera">updateCamera</a><span class="signature">( camera : <span class="param-type"><a href="Camera.html">Camera</a></span> )</span> </h3>
  358. <div class="method">
  359. <div class="description">
  360. <p>Updates the state of the XR camera. Use this method on app level if you
  361. set <code>cameraAutoUpdate</code> to <code>false</code>. The method requires the non-XR
  362. camera of the scene as a parameter. The passed in camera's transformation
  363. is automatically adjusted to the position of the XR camera when calling
  364. this method.</p>
  365. </div>
  366. <table class="params">
  367. <tbody>
  368. <tr>
  369. <td class="name">
  370. <strong>camera</strong>
  371. </td>
  372. <td class="description last">
  373. <p>The camera.</p>
  374. </td>
  375. </tr>
  376. </tbody>
  377. </table>
  378. </div>
  379. <h2 class="subsection-title">Source</h2>
  380. <p>
  381. <a href="https://github.com/mrdoob/three.js/blob/master/src/renderers/webxr/WebXRManager.js" translate="no" target="_blank" rel="noopener">src/renderers/webxr/WebXRManager.js</a>
  382. </p>
  383. </article>
  384. </section>
  385. <script src="../scripts/linenumber.js"></script>
  386. <script src="../scripts/page.js"></script>
  387. </body>
  388. </html>
粤ICP备19079148号