Add examples/webxr/ single-html example. Linked in index.html. Improved the experimental hands.ts interface. Fixed issue with single-camera WebXR. Added valley.spz to assets.json, added to assets repo.

src/SparkRenderer.ts

@@ -375,10 +375,7 @@ export class SparkRenderer extends THREE.Mesh {
           // In WebXR mode we are called multiple times, once for each eye,
           // so use their average to compute the sort center.
           const cameras = renderer.xr.getCamera().cameras;
-          this.defaultCameras = [
-            cameras[0].matrixWorld,
-            cameras[1].matrixWorld,
-          ];
+          this.defaultCameras = cameras.map((camera) => camera.matrixWorld);
           this.defaultView.viewToWorld =
             averageOriginToWorlds(this.defaultCameras) ?? new THREE.Matrix4();
         }

src/SplatEdit.ts

@@ -208,7 +208,9 @@ export class SplatEdit extends THREE.Object3D {
     if (this.sdfs == null) {
       this.sdfs = [];
     }
-    this.sdfs.push(sdf);
+    if (!this.sdfs.includes(sdf)) {
+      this.sdfs.push(sdf);
+    }
   }
 
   removeSdf(sdf: SplatEditSdf) {

src/hands.ts

@@ -240,8 +240,6 @@ export class XrHands {
       onFrame: () => {
         let splatIndex = 0;
         for (const handedness of HANDS) {
-          const active = this.values[`${handedness}MiddleThumb`];
-
           const xrHand = this.hands[handedness];
           for (const [index, segment] of JOINT_SEGMENTS.entries()) {
             for (let i = 1; i < segment.length; ++i) {
@@ -274,8 +272,6 @@ export class XrHands {
                   if (handedness === "right") {
                     color.set(1 - color.r, 1 - color.g, 1 - color.b);
                   }
-
-                  color.lerp(WHITE, active);
                   opacity = 0.75;
                 }
                 mesh.packedSplats.setSplat(
@@ -294,6 +290,7 @@ export class XrHands {
         mesh.packedSplats.numSplats = splatIndex;
         mesh.packedSplats.needsUpdate = true;
         mesh.numSplats = splatIndex;
+        mesh.updateVersion();
       },
     });
     return mesh;