chore: updated playground + pnpm-lock

playground/CHANGELOG.md

@@ -0,0 +1,17 @@
+# playground
+
+## 1.0.2
+
+### Patch Changes
+
+- Updated dependencies [71e5c71]
+  - @vixuslabs/newtonxr@1.1.0
+
+## 1.0.1
+
+### Patch Changes
+
+- Explicitly set no bundling to fix error in `@vixuslabs/newtonxr` package
+- Added `use strict` banner during build
+- Updated dependencies
+- @vixuslabs/newtonxr@1.0.1

playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playground",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -16,7 +16,8 @@
     "@coconut-xr/natuerlich": "^0.0.48",
     "@react-three/drei": "^9.97.3",
     "@react-three/fiber": "^8.15.11",
-    "@vixuslabs/newtonxr": "1.0.0",
+    "@react-three/rapier": "1.3.0",
+    "@vixuslabs/newtonxr": "1.1.0",
     "r3f-perf": "^7.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

playground/src/components/BuildPhysicalMeshes.tsx

@@ -0,0 +1,71 @@
+import React, { useRef } from "react";
+import { getMeshId } from "@coconut-xr/natuerlich";
+import { TrackedMesh } from "@coconut-xr/natuerlich/react";
+import type { ExtendedXRMesh } from "@coconut-xr/natuerlich/react";
+import { interactionGroups, RigidBody } from "@react-three/rapier";
+import type { RapierRigidBody } from "@react-three/rapier";
+
+interface BuildPhysicalMeshesProps {
+  meshes: readonly ExtendedXRMesh[] | undefined;
+  children?: React.ReactNode;
+  excludeGlobalMesh?: boolean;
+  debug?: boolean;
+}
+
+/**
+ * Transforms Tracked Meshes into Rigid Bodies.
+ *
+ * @param {meshes} props.meshes - The meshes to be transformed into rigid bodies. Retrievable with `useTrackedMeshes` from `@coconut-xr/natuerlich`.
+ * @param {children} props.children - The children of the mesh.
+ * @param {excludeGlobalMesh} props.excludeGlobalMesh - Whether to exclude the global mesh.
+ * @param {debug} props.debug - Whether to enable debug mode, which will add wireframe to the meshes.
+ *
+ * @note The meshes are generated by the space setup data from a Meta Quest or other compatible headset,
+ * which saves a layout of your room + allows you to map your furiniture.
+ *
+ * @returns A group of rigid bodies with all tracked meshes being a THREE.Mesh.
+ */
+export function BuildPhysicalMeshes({
+  children,
+  excludeGlobalMesh = false,
+  debug = false,
+  meshes,
+}: BuildPhysicalMeshesProps) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const rigidBodyRef = useRef<RapierRigidBody>(null);
+
+  return (
+    <group name="room-meshes">
+      {meshes?.map((mesh) => {
+        if (excludeGlobalMesh && mesh.semanticLabel === "global mesh")
+          return null;
+
+        return (
+          <RigidBody
+            name={mesh.semanticLabel}
+            key={getMeshId(mesh)}
+            type="fixed"
+            colliders={
+              mesh.semanticLabel === "global mesh" ? "trimesh" : "hull"
+            }
+            ref={rigidBodyRef}
+            collisionGroups={interactionGroups([7], [0, 1, 2, 3, 4, 5, 8])}
+          >
+            <TrackedMesh mesh={mesh} ref={meshRef}>
+              {children ? (
+                children
+              ) : (
+                <meshBasicMaterial
+                  wireframe={debug}
+                  transparent={!debug}
+                  opacity={debug ? 100 : 0}
+                  color={debug ? "purple" : "white"}
+                />
+              )}
+            </TrackedMesh>
+          </RigidBody>
+        );
+      })}
+    </group>
+  );
+}

playground/src/components/BuiltPhysicalPlanes.tsx

@@ -0,0 +1,68 @@
+import React, { useRef } from "react";
+import { getPlaneId } from "@coconut-xr/natuerlich";
+import type { ExtendedXRPlane } from "@coconut-xr/natuerlich/react";
+import { TrackedPlane } from "@coconut-xr/natuerlich/react";
+import { interactionGroups, RigidBody } from "@react-three/rapier";
+import type { RapierRigidBody } from "@react-three/rapier";
+
+interface BuildPhysicalPlanesProps {
+  planes: readonly ExtendedXRPlane[] | undefined;
+  children?: React.ReactNode;
+  debug?: boolean;
+}
+
+/**
+ * Transforms of Tracked Planes into Rigid Bodies.
+ *
+ * @param {planes} props.planes - The tracked planes to be transformed into rigid bodies. Retrievable with `useTrackedPlanes` from `@coconut-xr/natuerlich`.
+ * @param {children} props.children - The children of the mesh.
+ * @param {excludeGlobalMesh} props.excludeGlobalMesh - Whether to exclude the global mesh.
+ * @param {debug} props.debug - Whether to enable debug mode, which will add wireframe to the meshes.
+ *
+ * @note The planes are generated by the space setup data from a Meta Quest or other compatible headset,
+ * which saves a layout of your room + allows you to map your furiniture.
+ /**
+ * @returns A group of rigid bodies with all tracked planes being a THREE.Mesh.
+ */
+export function BuildPhysicalPlanes({
+  planes,
+  children,
+  debug = false,
+}: BuildPhysicalPlanesProps) {
+  const planeRef = useRef<THREE.Mesh>(null);
+  const rigidBodyRef = useRef<RapierRigidBody>(null);
+
+  return (
+    <group name="room-planes">
+      {planes?.map((plane) => (
+        <RigidBody
+          key={getPlaneId(plane)}
+          // using same rigidBodyRef for all meshes
+          // NEED TO CHANGE
+          ref={rigidBodyRef}
+          colliders="cuboid"
+          type="fixed"
+          collisionGroups={interactionGroups([6], [0, 1, 2, 3, 4, 5, 8])}
+        >
+          <TrackedPlane
+            plane={plane}
+            ref={planeRef}
+            // meshRef={meshRef}
+            // rigidBodyRef={rigidBodyRef}
+          >
+            {children ? (
+              children
+            ) : (
+              <meshPhongMaterial
+                wireframe={debug}
+                opacity={debug ? 100 : 0}
+                transparent={!debug}
+                color={debug ? "red" : "white"}
+              />
+            )}
+          </TrackedPlane>
+        </RigidBody>
+      ))}
+    </group>
+  );
+}

playground/src/examples/Home.tsx

@@ -10,6 +10,8 @@ import {
   useNativeFramebufferScaling,
   useSessionChange,
   useSessionSupported,
+  useTrackedMeshes,
+  useTrackedPlanes,
 } from "@coconut-xr/natuerlich/react";
 import {
   BuildPhysicalMeshes,
@@ -34,6 +36,8 @@ export default function Home() {
   const [clickedStart, setClickedStart] = useState(false);
   const enterAR = useEnterXR("immersive-ar", sessionOptions);
   const inputSources = useInputSources();
+  const meshes = useTrackedMeshes();
+  const planes = useTrackedPlanes();
 
   const isSupported = useSessionSupported("immersive-ar");
 
@@ -99,8 +103,8 @@ export default function Home() {
               )}
 
               <ImmersiveSessionOrigin>
-                <BuildPhysicalMeshes excludeGlobalMesh />
-                <BuildPhysicalPlanes />
+                <BuildPhysicalMeshes meshes={meshes} excludeGlobalMesh />
+                <BuildPhysicalPlanes planes={planes} />
 
                 {startSync && (
                   <>