Fix webxrmanager

.all-contributorsrc

@@ -51,6 +51,16 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "FMS-Cat",
+      "name": "Yutaka \"FMS_Cat\" Obuchi",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7824814?v=4",
+      "profile": "http://fms-cat.github.io/",
+      "contributions": [
+        "code",
+        "test"
+      ]
     }
   ],
   "skipCi": true,

README.md

@@ -30,6 +30,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="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/joshuaellis"><img src="https://avatars.githubusercontent.com/u/37798644?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Josh</b></sub></a><br /><a href="#question-joshuaellis" title="Answering Questions">💬</a> <a href="https://github.com/three-types/three-ts-types/issues?q=author%3Ajoshuaellis" title="Bug reports">🐛</a> <a href="https://github.com/three-types/three-ts-types/commits?author=joshuaellis" title="Code">💻</a> <a href="https://github.com/three-types/three-ts-types/commits?author=joshuaellis" title="Documentation">📖</a> <a href="#ideas-joshuaellis" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-joshuaellis" title="Maintenance">🚧</a> <a href="https://github.com/three-types/three-ts-types/pulls?q=is%3Apr+reviewed-by%3Ajoshuaellis" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/three-types/three-ts-types/commits?author=joshuaellis" title="Tests">⚠️</a></td>
     <td align="center"><a href="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/Methuselah96"><img src="https://avatars.githubusercontent.com/u/693755?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nathan Bierema</b></sub></a><br /><a href="#question-Methuselah96" title="Answering Questions">💬</a> <a href="https://github.com/three-types/three-ts-types/issues?q=author%3AMethuselah96" title="Bug reports">🐛</a> <a href="https://github.com/three-types/three-ts-types/commits?author=Methuselah96" title="Code">💻</a> <a href="https://github.com/three-types/three-ts-types/commits?author=Methuselah96" title="Documentation">📖</a> <a href="#ideas-Methuselah96" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-Methuselah96" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#maintenance-Methuselah96" title="Maintenance">🚧</a> <a href="https://github.com/three-types/three-ts-types/pulls?q=is%3Apr+reviewed-by%3AMethuselah96" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/three-types/three-ts-types/commits?author=Methuselah96" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://human-interactive.org"><img src="https://avatars.githubusercontent.com/u/12612165?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michael Herzog</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=Mugen87" title="Code">💻</a></td>
+    <td align="center"><a href="http://fms-cat.github.io/"><img src="https://avatars.githubusercontent.com/u/7824814?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yutaka "FMS_Cat" Obuchi</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=FMS-Cat" title="Code">💻</a> <a href="https://github.com/three-types/three-ts-types/commits?author=FMS-Cat" title="Tests">⚠️</a></td>
   </tr>
 </table>
 

types/three/src/renderers/webxr/WebXR.d.ts

@@ -93,9 +93,7 @@ export interface XRSessionInit {
     requiredFeatures?: string[];
 }
 
-export interface XRSession {
-    addEventListener: () => void;
-    removeEventListener: () => void;
+export interface XRSession extends EventTarget {
     requestReferenceSpace(type: XRReferenceSpaceType): Promise<XRReferenceSpace>;
     updateRenderState(renderStateInit: XRRenderStateInit): Promise<void>;
     requestAnimationFrame(callback: XRFrameRequestCallback): number;

types/three/src/renderers/webxr/WebXRManager.d.ts

@@ -16,14 +16,14 @@ export class WebXRManager extends EventDispatcher {
      */
     isPresenting: boolean;
 
-    getController(id: number): Group;
-    getControllerGrip(id: number): Group;
-    getHand(id: number): Group;
+    getController(index: number): Group;
+    getControllerGrip(index: number): Group;
+    getHand(index: number): Group;
     setFramebufferScaleFactor(value: number): void;
     setReferenceSpaceType(value: XRReferenceSpaceType): void;
-    getReferenceSpace(): XRReferenceSpace;
-    getSession(): XRSession;
-    setSession(value: XRSession): void;
+    getReferenceSpace(): XRReferenceSpace | null;
+    getSession(): XRSession | null;
+    setSession(value: XRSession): Promise<void>;
     getCamera(camera: Camera): Camera;
     setAnimationLoop(callback: XRFrameRequestCallback): void;
     dispose(): void;

types/three/test/renderers/webxr/webxr-vr-cube.ts

@@ -0,0 +1,97 @@
+// A simple WebXR VR example that just shows a cube.
+
+import * as THREE from 'three';
+
+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: THREE.XRSession | null = null;
+let mesh: THREE.Mesh;
+
+init();
+
+async function onSessionStarted(session: THREE.XRSession): Promise<void> {
+    session.addEventListener('end', onSessionEnded);
+
+    await renderer.xr.setSession(session);
+    vrButton.innerText = 'Exit VR';
+
+    currentSession = session;
+}
+
+function onSessionEnded(): void {
+    if (currentSession == null) {
+        return;
+    }
+
+    currentSession.removeEventListener('end', onSessionEnded);
+    vrButton.innerText = 'Enter VR';
+
+    currentSession = null;
+}
+
+async function checkVRSupport(): Promise<THREE.XR | null> {
+    if ('xr' in navigator) {
+        const xr: THREE.XR = (navigator as any).xr;
+        const isSupported = await xr.isSessionSupported('immersive-vr').catch(() => false);
+        if (isSupported) {
+            return xr;
+        } else {
+            return null;
+        }
+    } else {
+        return null;
+    }
+}
+
+function init(): void {
+    document.body.appendChild(container);
+
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(300, 150);
+    renderer.outputEncoding = THREE.sRGBEncoding;
+    renderer.xr.enabled = true;
+    container.appendChild(renderer.domElement);
+
+    camera.position.set(0, 1.6, 0);
+    scene.add(camera);
+
+    const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
+    const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
+    mesh = new THREE.Mesh(geometry, material);
+    mesh.position.set(0, 1.6, -3);
+    scene.add(mesh);
+
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+    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;
+
+        renderer.render(scene, camera);
+    });
+}

types/three/tsconfig.json

@@ -30,6 +30,7 @@
         "test/materials/materials-variations-lambert.ts",
         "test/materials/materials-variations-phong.ts",
         "test/materials/materials-variations-physical.ts",
-        "test/materials/materials-variations-standard.ts"
+        "test/materials/materials-variations-standard.ts",
+        "test/renderers/webxr/webxr-vr-cube.ts"
     ]
 }