add(webxr): XRButton types (#518)

* Add XRButton.d.ts * Update webxr-vr-cubes to use XRButton and rename to WebXR--cubes * add(webxr): XRButton type * Clean up added contributor --------- Co-authored-by: Nathan Bierema <[email protected]>
three-types · Jul 4, 2023 · 291772d · 291772d
1 parent 0fb9482
commit 291772d
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 26 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -754,6 +754,15 @@
         "doc",
         "maintenance"
       ]
+    },
+    {
+      "login": "Yonet",
+      "name": "Yönet",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3523671?v=4",
+      "profile": "https://github.com/Yonet",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "skipCi": true,

diff --git a/README.md b/README.md
@@ -142,6 +142,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Mik-pe"><img src="https://avatars.githubusercontent.com/u/5653426?v=4?s=100" width="100px;" alt="Mikael Pettersson"/><br /><sub><b>Mikael Pettersson</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=Mik-pe" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/magnostherobot"><img src="https://avatars.githubusercontent.com/u/24718981?v=4?s=100" width="100px;" alt="Tom Harley"/><br /><sub><b>Tom Harley</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=Mik-pe" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/OndrejSpanel"><img src="https://avatars.githubusercontent.com/u/6927223?v=4?s=100" width="100px;" alt="Ondřej Španěl"/><br /><sub><b>Ondřej Španěl</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/issues?q=author%3AOndrejSpanel" title="Bug reports">🐛</a> <a href="https://github.com/three-types/three-ts-types/commits?author=OndrejSpanel" title="Code">💻</a> <a href="https://github.com/three-types/three-ts-types/commits?author=OndrejSpanel" title="Documentation">📖</a> <a href="#maintenance-OndrejSpanel" title="Maintenance">🚧</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Yonet"><img src="https://avatars.githubusercontent.com/u/3523671?v=4?s=100" width="100px;" alt="Yönet"/><br /><sub><b>Yönet</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=Yonet" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

diff --git a/types/three/examples/jsm/webxr/XRButton.d.ts b/types/three/examples/jsm/webxr/XRButton.d.ts
@@ -0,0 +1,6 @@
+import { WebGLRenderer } from '../../../src/Three';
+
+// tslint:disable-next-line:no-unnecessary-class
+export class XRButton {
+    static createButton(renderer: WebGLRenderer): HTMLElement;
+}
diff --git a/...s/three/test/integration/webxr-vr-cube.ts → types/three/test/integration/webxr-cube.ts b/...s/three/test/integration/webxr-vr-cube.ts → types/three/test/integration/webxr-cube.ts
@@ -1,14 +1,14 @@
 // A simple WebXR VR example that just shows a cube.
 
 import * as THREE from 'three';
+import { XRButton } from 'three/examples/jsm/webxr/XRButton';
 
 const container = document.createElement('div');
 
 const renderer = new THREE.WebGLRenderer({ antialias: true });
 const camera = new THREE.PerspectiveCamera(50, 2, 0.1, 10);
 const scene = new THREE.Scene();
 
-const vrButton = document.createElement('button');
 let currentSession: XRSession | null = null;
 let mesh: THREE.Mesh;
 
@@ -18,20 +18,15 @@ async function onSessionStarted(session: XRSession): Promise<void> {
     session.addEventListener('end', onSessionEnded);
 
     await renderer.xr.setSession(session);
-    vrButton.innerText = 'Exit VR';
-
     currentSession = session;
 }
 
 async function onSessionEnded(): Promise<void> {
     if (currentSession == null) {
         return;
     }
-
     currentSession.removeEventListener('end', onSessionEnded);
     await renderer.xr.setSession(null);
-    vrButton.innerText = 'Enter VR';
-
     currentSession = null;
 }
 
@@ -53,7 +48,6 @@ function init(): void {
 
     renderer.setPixelRatio(window.devicePixelRatio);
     renderer.setSize(300, 150);
-    renderer.outputEncoding = THREE.sRGBEncoding;
     renderer.xr.enabled = true;
     container.appendChild(renderer.domElement);
 
@@ -70,24 +64,6 @@ function init(): void {
     directionalLight.position.set(1, 1, 1).normalize();
     scene.add(directionalLight);
 
-    checkVRSupport().then(xr => {
-        if (xr) {
-            vrButton.innerText = 'Enter VR';
-
-            vrButton.addEventListener('click', async () => {
-                if (currentSession == null) {
-                    const sessionInit = { optionalFeatures: ['local-floor', 'bounded-floor'] };
-                    const session = await xr.requestSession('immersive-vr', sessionInit);
-                    await onSessionStarted(session);
-                }
-            });
-        } else {
-            vrButton.innerText = 'VR Not Supported';
-        }
-
-        container.appendChild(vrButton);
-    });
-
     renderer.setAnimationLoop(() => {
         mesh.rotation.x += 0.005;
         mesh.rotation.y += 0.01;

diff --git a/types/three/tsconfig.json b/types/three/tsconfig.json
@@ -78,7 +78,7 @@
         "test/integration/three-examples/webgl_shadowmap_vsm.ts",
         "test/integration/three-examples/webxr_ar_lighting.ts",
         "test/integration/three-examples/webxr_vr_handinput_cubes.ts",
-        "test/integration/webxr-vr-cube.ts",
+        "test/integration/webxr-cube.ts",
         "test/unit/examples/jsm/exporters/PLYExporter.ts",
         "test/unit/examples/jsm/exporters/STLExporter.ts",
         "test/unit/examples/jsm/helpers/ViewHelper.ts",