| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>WebXRManager - Three.js Docs</title>
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <script src="../scripts/highlight.min.js"></script>
- <link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
- <link type="text/css" rel="stylesheet" href="../styles/page.css">
- </head>
- <body>
- <p class="inheritance" translate="no"><a href="EventDispatcher.html">EventDispatcher</a> → </p>
- <h1 translate="no">WebXRManager</h1>
- <section>
- <header>
- <div class="class-description"><p>This class represents an abstraction of the WebXR Device API and is
- internally used by <a href="WebGLRenderer.html">WebGLRenderer</a>. <code>WebXRManager</code> also provides a public
- interface that allows users to enable/disable XR and perform XR related
- tasks like for instance retrieving controllers.</p></div>
- </header>
- <article>
- <div class="container-overview">
- <div class="method">
- </div>
- </div>
- <h2 class="subsection-title">Properties</h2>
- <div class="member">
- <h3 class="name" id="cameraAutoUpdate" translate="no">.<a href="#cameraAutoUpdate">cameraAutoUpdate</a><span class="type-signature"> : boolean</span> </h3>
- <div class="description">
- <p>Whether the manager's XR camera should be automatically updated or not.</p>
- <p>Default is <code>true</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="enabled" translate="no">.<a href="#enabled">enabled</a><span class="type-signature"> : boolean</span> </h3>
- <div class="description">
- <p>This flag notifies the renderer to be ready for XR rendering. Set it to <code>true</code>
- if you are going to use XR in your app.</p>
- <p>Default is <code>false</code>.</p>
- </div>
- </div>
- <div class="member">
- <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>
- <div class="description">
- <p>Whether XR presentation is active or not.</p>
- <p>Default is <code>false</code>.</p>
- </div>
- </div>
- <h2 class="subsection-title">Methods</h2>
- <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>
- <div class="method">
- <div class="description">
- <p>Returns the current base layer.</p>
- <p>This is an <code>XRProjectionLayer</code> when the targeted XR device supports the
- WebXR Layers API, or an <code>XRWebGLLayer</code> otherwise.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The XR base layer.</dt>
- </dl>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Returns the current XR binding.</p>
- <p>Creates a new binding if needed and the browser is
- capable of doing so.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The XR binding. Returns <code>null</code> if one cannot be created.</dt>
- </dl>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Returns an instance of <a href="ArrayCamera.html">ArrayCamera</a> which represents the XR camera
- of the active XR session. For each view it holds a separate camera object.</p>
- <p>The camera's <code>fov</code> is currently not used and does not reflect the fov of
- the XR camera. If you need the fov on app level, you have to compute in
- manually from the XR camera's projection matrices.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The XR camera.</dt>
- </dl>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Retrieves an opaque texture from the view-aligned XRCamera.
- Only available during the current animation loop.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>xrCamera</strong>
- </td>
- <td class="description last">
- <p>The camera to query.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> An opaque texture representing the current raw camera frame.</dt>
- </dl>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Returns a group representing the <code>target ray</code> space of the XR controller.
- Use this space for visualizing 3D objects that support the user in pointing
- tasks like UI interaction.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>index</strong>
- </td>
- <td class="description last">
- <p>The index of the controller.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A group representing the <code>target ray</code> space.</dt>
- </dl>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Returns a group representing the <code>grip</code> space of the XR controller.
- Use this space for visualizing 3D objects that support the user in pointing
- tasks like UI interaction.</p>
- <p>Note: If you want to show something in the user's hand AND offer a
- pointing ray at the same time, you'll want to attached the handheld object
- to the group returned by <code>getControllerGrip()</code> and the ray to the
- group returned by <code>getController()</code>. The idea is to have two
- different groups in two different coordinate spaces for the same WebXR
- controller.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>index</strong>
- </td>
- <td class="description last">
- <p>The index of the controller.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A group representing the <code>grip</code> space.</dt>
- </dl>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Returns the depth sensing mesh.</p>
- <p>See <a href="WebXRDepthSensing.html#getMesh">WebXRDepthSensing#getMesh</a>.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The depth sensing mesh.</dt>
- </dl>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Returns the current depth texture computed via depth sensing.</p>
- <p>See <a href="WebXRDepthSensing.html#getDepthTexture">WebXRDepthSensing#getDepthTexture</a>.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The depth texture.</dt>
- </dl>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Returns the environment blend mode from the current XR session.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The environment blend mode. Returns <code>undefined</code> when used outside of a XR session.</dt>
- </dl>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Returns the amount of foveation used by the XR compositor for the projection layer.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The amount of foveation.</dt>
- </dl>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Returns the current XR frame.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The XR frame. Returns <code>null</code> when used outside a XR session.</dt>
- </dl>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Returns a group representing the <code>hand</code> space of the XR controller.
- Use this space for visualizing 3D objects that support the user in pointing
- tasks like UI interaction.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>index</strong>
- </td>
- <td class="description last">
- <p>The index of the controller.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A group representing the <code>hand</code> space.</dt>
- </dl>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Returns the XR reference space.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The XR reference space.</dt>
- </dl>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Returns the current XR session.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The XR session. Returns <code>null</code> when used outside a XR session.</dt>
- </dl>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Returns <code>true</code> if depth sensing is supported.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> Whether depth sensing is supported or not.</dt>
- </dl>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Sets the foveation value.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>value</strong>
- </td>
- <td class="description last">
- <p>A number in the range <code>[0,1]</code> where <code>0</code> means no foveation (full resolution)
- and <code>1</code> means maximum foveation (the edges render at lower resolution).</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Sets the framebuffer scale factor.</p>
- <p>This method can not be used during a XR session.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>value</strong>
- </td>
- <td class="description last">
- <p>The framebuffer scale factor.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Sets a custom XR reference space.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>space</strong>
- </td>
- <td class="description last">
- <p>The XR reference space.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Sets the reference space type. Can be used to configure a spatial relationship with the user's physical
- environment. Depending on how the user moves in 3D space, setting an appropriate reference space can
- improve tracking. Default is <code>local-floor</code>. Valid values can be found here
- https://developer.mozilla.org/en-US/docs/Web/API/XRReferenceSpace#reference_space_types.</p>
- <p>This method can not be used during a XR session.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>value</strong>
- </td>
- <td class="description last">
- <p>The reference space type.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>After a XR session has been requested usually with one of the <code>*Button</code> modules, it
- is injected into the renderer with this method. This method triggers the start of
- the actual XR rendering.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>value</strong>
- </td>
- <td class="description last">
- <p>The XR session to set.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolves when the session has been set.</dt>
- </dl>
- </div>
- <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>
- <div class="method">
- <div class="description">
- <p>Updates the state of the XR camera. Use this method on app level if you
- set <code>cameraAutoUpdate</code> to <code>false</code>. The method requires the non-XR
- camera of the scene as a parameter. The passed in camera's transformation
- is automatically adjusted to the position of the XR camera when calling
- this method.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>camera</strong>
- </td>
- <td class="description last">
- <p>The camera.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h2 class="subsection-title">Source</h2>
- <p>
- <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>
- </p>
- </article>
- </section>
- <script src="../scripts/linenumber.js"></script>
- <script src="../scripts/page.js"></script>
- </body>
- </html>
|