fix: WebXR examples (#218)

* fix ARButton constructor parameters

ARButton can specify WebXR session initialization options when the
button is clicked. In particular, it offers the ability to define the
`domOverlay` property allow DOM elements to render on top of the AR
session.

* Add missing `envMap` field to `XRControllerModelFactory`

* Provide more-specific type definition for `motionController` field

In OculusHandModel and OculusHandPointerModel, the motionController field
will be set to an XRHandMeshModel value.

* Specify type for `XREstimatedLight`'s `lightProbe` field.

The lightProbe field is a regular Three.js LightProbe object.

* Fix `XRHandModelFactory`'s `createHandModel`'s `profile` parameter

The value of "oculus" has not been used for nearly a year. A more
generic "mesh" value has been available since r129.

* add to contributors

* Use the complete WebXR types from DefinitelyTyped

* revert yarn.lock

* try running yarn install

.all-contributorsrc

@@ -325,14 +325,23 @@
       ]
     },
     {
-          "login": "subhankar-trisetra",
+      "login": "subhankar-trisetra",
       "name": "Subhankar Pal",
       "avatar_url": "https://avatars.githubusercontent.com/u/98544661?v=4",
       "profile": "https://subho57.github.io",
       "contributions": [
-        "code",
-        ],
-        }
+        "code"
+      ]
+    },
+    {
+      "login": "capnmidnight",
+      "name": "Sean T. McBeth",
+      "avatar_url": "https://avatars.githubusercontent.com/u/298046?v=4",
+      "profile": "http://www.seanmcbeth.com/",
+      "contributions": [
+        "code"
+      ]
+    }
   ],
   "skipCi": true,
   "contributorsPerLine": 7

README.md

@@ -67,8 +67,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/LauferAlex"><img src="https://avatars.githubusercontent.com/u/86115165?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Alejandro Laufer</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/issues?q=author%3ALauferAlex" title="Bug reports">🐛</a> <a href="https://github.com/three-types/three-ts-types/commits?author=LauferAlex" title="Code">💻</a></td>
     <td align="center"><a href="https://twitter.com/ggsimm"><img src="https://avatars.githubusercontent.com/u/1862172?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Gianmarco</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=gsimone" title="Code">💻</a></td>
     <td align="center"><a href="https://davidpeicho.github.io/"><img src="https://avatars.githubusercontent.com/u/8783766?v=4?s=100" width="100px;" alt=""/><br /><sub><b>David Peicho</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=DavidPeicho" title="Code">💻</a></td>
-    <td align="center"><a href="https://subho57.github.io"><img src="https://avatars.githubusercontent.com/u/98544661?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Subhankar Pal</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=subhankar-trisetra" title="Code">💻</a> <a href="https://github.com/three-types/three-ts-types/commits?author=subhankar-trisetra" title="Documentation">📖</a></td>
     <td align="center"><a href="https://synphonyte.com"><img src="https://avatars.githubusercontent.com/u/380881?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Maccesch</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=maccesch" title="Code">💻</a> <a href="https://github.com/three-types/three-ts-types/commits?author=maccesch" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://subho57.github.io"><img src="https://avatars.githubusercontent.com/u/98544661?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Subhankar Pal</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=subhankar-trisetra" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.seanmcbeth.com/"><img src="https://avatars.githubusercontent.com/u/298046?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sean T. McBeth</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=capnmidnight" title="Code">💻</a></td>
   </tr>
 </table>
 

package.json

@@ -18,5 +18,8 @@
         "prettier": "2.3.2",
         "pretty-quick": "^3.1.1",
         "typescript": "next"
+    },
+    "dependencies": {
+        "@types/webxr": "^0.4.0"
     }
 }

types/three/examples/jsm/webxr/ARButton.d.ts

@@ -1,5 +1,9 @@
 import { WebGLRenderer } from '../../../src/Three';
 
+export interface ARButtonSessionInit extends XRSessionInit {
+    domOverlay: { root: HTMLElement };
+}
+
 export namespace ARButton {
-    function createButton(renderer: WebGLRenderer, sessionInit?: any): HTMLElement;
+    function createButton(renderer: WebGLRenderer, sessionInit?: Partial<ARButtonSessionInit>): HTMLElement;
 }

types/three/examples/jsm/webxr/OculusHandModel.d.ts

@@ -1,8 +1,9 @@
-import { Object3D, Sphere, Box3, Mesh, Texture, Vector3 } from '../../../src/Three';
+import { Mesh, Object3D, Texture, Vector3 } from '../../../src/Three';
+import { XRHandMeshModel } from './XRHandMeshModel';
 
 export class OculusHandModel extends Object3D {
     controller: Object3D;
-    motionController: Object3D | null;
+    motionController: XRHandMeshModel | null;
     envMap: Texture | null;
 
     mesh: Mesh | null;

types/three/examples/jsm/webxr/OculusHandPointerModel.d.ts

@@ -1,3 +1,5 @@
+import 'webxr';
+
 import {
     BufferGeometry,
     Intersection,
@@ -10,10 +12,12 @@ import {
     Vector3,
 } from '../../../src/Three';
 
+import { XRHandMeshModel } from './XRHandMeshModel';
+
 export class OculusHandPointerModel extends Object3D {
     hand: Object3D;
     controller: Object3D;
-    motionController: Object3D | null;
+    motionController: XRHandMeshModel | null;
 
     envMap: Texture | null;
 
@@ -31,7 +35,7 @@ export class OculusHandPointerModel extends Object3D {
     raycaster: Raycaster;
 
     visible: boolean;
-    xrInputSource: unknown;
+    xrInputSource: XRInputSource;
 
     constructor(hand: Object3D, controller: Object3D);
 

types/three/examples/jsm/webxr/XRControllerModelFactory.d.ts

@@ -7,6 +7,8 @@ export class XRControllerModel extends Object3D {
 
     motionController: any;
 
+    envMap: Texture;
+
     setEnvironmentMap(envMap: Texture): XRControllerModel;
 }
 

types/three/examples/jsm/webxr/XREstimatedLight.d.ts

@@ -1,24 +1,24 @@
-import { DirectionalLight, Group, LightProbe, XRFrame, WebGLRenderer, Texture } from '../../../src/Three';
+import { DirectionalLight, Group, LightProbe, Texture, WebGLRenderer } from '../../../src/Three';
 
 export class SessionLightProbe {
     xrLight: XREstimatedLight;
     renderer: WebGLRenderer;
-    lightProbe: unknown;
-    xrWebGLBinding: unknown | null;
+    lightProbe: LightProbe;
+    xrWebGLBinding: XRWebGLBinding | null;
     estimationStartCallback: () => void;
     frameCallback: (this: SessionLightProbe, time: number, xrFrame: XRFrame) => void;
 
     constructor(
         xrLight: XREstimatedLight,
         renderer: WebGLRenderer,
-        lightProbe: unknown,
+        lightProbe: LightProbe,
         environmentEstimation: boolean,
         estimationStartCallback: () => void,
     );
 
     updateReflection: () => void;
 
-    onXRFrame: (time: number, xrFrame: XRFrame) => void;
+    onXRFrame: XRFrameRequestCallback;
 
     dispose: () => void;
 }

types/three/examples/jsm/webxr/XRHandModelFactory.d.ts

@@ -19,7 +19,7 @@ export class XRHandModelFactory {
 
     createHandModel(
         controller: Group,
-        profile?: 'spheres' | 'boxes' | 'oculus',
+        profile?: 'spheres' | 'boxes' | 'mesh',
         options?: XRHandPrimitiveModelOptions,
     ): XRHandModel;
 }

types/three/src/renderers/WebGLRenderer.d.ts

@@ -19,7 +19,6 @@ import { WebXRManager } from '../renderers/webxr/WebXRManager';
 import { BufferGeometry } from './../core/BufferGeometry';
 import { Texture } from '../textures/Texture';
 import { Data3DTexture } from '../textures/Data3DTexture';
-import { XRAnimationLoopCallback } from './webxr/WebXR';
 import { Vector3 } from '../math/Vector3';
 import { Box3 } from '../math/Box3';
 import { DataArrayTexture } from '../textures/DataArrayTexture';
@@ -336,7 +335,7 @@ export class WebGLRenderer implements Renderer {
      * A build in function that can be used instead of requestAnimationFrame. For WebXR projects this function must be used.
      * @param callback The function will be called every available frame. If `null` is passed it will stop any already ongoing animation.
      */
-    setAnimationLoop(callback: XRAnimationLoopCallback | null): void;
+    setAnimationLoop(callback: XRFrameRequestCallback | null): void;
 
     /**
      * @deprecated Use {@link WebGLRenderer#setAnimationLoop .setAnimationLoop()} instead.