m-position-probe

e2e-tests/src/m-position-probe-test.html

@@ -0,0 +1,97 @@
+<m-plane color="lightsteelblue" width="15" height="15" rx="-90"></m-plane>
+<m-light type="spotlight" ry="45" rx="65" rz="-45" x="10" y="10" z="10"></m-light>
+
+<m-group id="my-group" x="3" ry="30" y="4">
+  <m-position-probe range="7" id="my-probe" interval="100"></m-position-probe>
+  <m-group id="user-presence-holder"></m-group>
+</m-group>
+
+<m-cube id="toggle-range-cube" color="green" x="2" z="3" y="1.5"></m-cube>
+<m-cube id="toggle-position-cube" color="red" x="-2" z="3" y="1.5"></m-cube>
+
+<script>
+  const positionProbe = document.getElementById("my-probe");
+  const originalRange = positionProbe.getAttribute("range");
+  const group = document.getElementById("my-group");
+  const originalX = group.getAttribute("x");
+  const toggledRange = 25;
+  const toggledX = -3;
+
+  const toggleRangeCube = document.getElementById("toggle-range-cube");
+  let rangeToggle = false;
+  toggleRangeCube.addEventListener("click", () => {
+    rangeToggle = !rangeToggle;
+    positionProbe.setAttribute("range", rangeToggle ? toggledRange : originalRange);
+  });
+
+  const togglePositionCube = document.getElementById("toggle-position-cube");
+  let positionToggle = false;
+  togglePositionCube.addEventListener("click", () => {
+    positionToggle = !positionToggle;
+    group.setAttribute("x", positionToggle ? toggledX : originalX);
+  });
+
+  const connectedUsers = new Map();
+  const userPresenceHolder = document.getElementById("user-presence-holder");
+
+  function getOrCreateUser(connectionId, position, rotation) {
+    const user = connectedUsers.get(connectionId);
+    if (user) {
+      user.position = position;
+      user.rotation = rotation;
+      return user;
+    }
+    const userCube = document.createElement("m-cube");
+    userCube.setAttribute("collide", false);
+    userCube.setAttribute("data-test-id", "user-cube");
+    userCube.setAttribute("width", 0.25);
+    userCube.setAttribute("height", 0.25);
+    userCube.setAttribute("depth", 0.25);
+    userCube.setAttribute("color", "red");
+    userPresenceHolder.append(userCube);
+    const newUser = {
+      cube: userCube,
+      position,
+      rotation,
+    };
+    connectedUsers.set(connectionId, newUser);
+    return newUser;
+  }
+
+  function clearUser(connectionId) {
+    const user = connectedUsers.get(connectionId);
+    if (!user) return;
+    user.cube.remove();
+    connectedUsers.delete(connectionId);
+  }
+
+  function setCubePosition(connectionId, position, rotation) {
+    const user = getOrCreateUser(connectionId, position, rotation);
+    user.cube.setAttribute("x", position.x / 2);
+    user.cube.setAttribute("y", position.y / 2);
+    user.cube.setAttribute("z", position.z / 2);
+    user.cube.setAttribute("rx", rotation.x);
+    user.cube.setAttribute("ry", rotation.y);
+    user.cube.setAttribute("rz", rotation.z);
+  }
+
+  positionProbe.addEventListener("positionenter", (event) => {
+    const { connectionId, elementRelative, documentRelative } = event.detail;
+    setCubePosition(connectionId, elementRelative.position, elementRelative.rotation);
+  });
+
+  positionProbe.addEventListener("positionmove", (event) => {
+    const { connectionId, elementRelative, documentRelative } = event.detail;
+    setCubePosition(connectionId, elementRelative.position, elementRelative.rotation);
+  });
+
+  positionProbe.addEventListener("positionleave", (event) => {
+    const { connectionId } = event.detail;
+    clearUser(connectionId);
+  });
+
+  window.addEventListener("disconnected", (event) => {
+    const { connectionId } = event.detail;
+    clearUser(connectionId);
+  });
+</script>

e2e-tests/test/m-position-probe.test.ts

@@ -0,0 +1,62 @@
+import * as puppeteer from "puppeteer";
+
+import { clickElement, takeAndCompareScreenshot } from "./testing-utils";
+
+describe("m-position-probe", () => {
+  test("receives user positions", async () => {
+    const page = (await globalThis.__BROWSER_GLOBAL__.newPage()) as puppeteer.Page;
+
+    await page.setViewport({ width: 1024, height: 1024 });
+
+    await page.goto("http://localhost:8079/m-position-probe-test.html/reset");
+
+    await page.waitForSelector("m-position-probe");
+
+    await page.waitForSelector("#toggle-range-cube");
+
+    await takeAndCompareScreenshot(page);
+
+    await clickElement(page, "#toggle-range-cube");
+
+    await page.waitForSelector("m-cube[data-test-id='user-cube']");
+
+    const { x: x1, z: z1 } = await page.evaluate(() => {
+      const userCube = document.querySelector("m-cube[data-test-id='user-cube']");
+      const x = parseFloat(userCube.getAttribute("x"));
+      const z = parseFloat(userCube.getAttribute("z"));
+      return { x, z };
+    });
+    expect(x1).toBeLessThan(-3.7);
+    expect(x1).toBeGreaterThan(-3.9);
+    expect(z1).toBeGreaterThan(3.5);
+    expect(z1).toBeLessThan(3.6);
+
+    await takeAndCompareScreenshot(page);
+
+    await clickElement(page, "#toggle-position-cube");
+
+    await page.waitForFunction(
+      () => {
+        const userCube = document.querySelector("m-cube[data-test-id='user-cube']");
+        // Wait for the cube to move based on the position probe moving
+        return parseFloat(userCube.getAttribute("x")) > -2;
+      },
+      { timeout: 5000, polling: 100 },
+    );
+
+    const { x: x2, z: z2 } = await page.evaluate(() => {
+      const userCube = document.querySelector("m-cube[data-test-id='user-cube']");
+      const x = parseFloat(userCube.getAttribute("x"));
+      const z = parseFloat(userCube.getAttribute("z"));
+      return { x, z };
+    });
+    expect(x2).toBeLessThan(-1.1);
+    expect(x2).toBeGreaterThan(-1.3);
+    expect(z2).toBeGreaterThan(5);
+    expect(z2).toBeLessThan(5.1);
+
+    await takeAndCompareScreenshot(page);
+
+    await page.close();
+  }, 60000);
+});

packages/mml-web/src/MMLScene.ts

@@ -9,9 +9,9 @@ import { InteractionManager } from "./interaction-ui";
 import { MMLClickTrigger } from "./MMLClickTrigger";
 import { PromptManager } from "./prompt-ui";
 
-export type ScenePosition = {
-  location: { x: number; y: number; z: number };
-  orientation: { x: number; y: number; z: number };
+export type PositionAndRotation = {
+  position: { x: number; y: number; z: number };
+  rotation: { x: number; y: number; z: number };
 };
 
 export type InteractionListener = {
@@ -42,7 +42,7 @@ export type IMMLScene = {
   updateInteraction?: (interaction: Interaction) => void;
   removeInteraction?: (interaction: Interaction) => void;
 
-  getUserPosition: () => ScenePosition;
+  getUserPositionAndRotation(): PositionAndRotation;
 
   prompt: (promptProps: PromptProps, callback: (message: string | null) => void) => void;
 };
@@ -182,10 +182,10 @@ export class MMLScene implements IMMLScene {
     return this.camera;
   }
 
-  public getUserPosition(): ScenePosition {
+  public getUserPositionAndRotation(): PositionAndRotation {
     return {
-      location: this.camera.position,
-      orientation: {
+      position: this.camera.position,
+      rotation: {
         x: this.camera.rotation.x,
         y: this.camera.rotation.y,
         z: this.camera.rotation.z,

packages/mml-web/src/elements/MElement.ts

@@ -3,7 +3,7 @@ import * as THREE from "three";
 import { RemoteDocument } from "./RemoteDocument";
 import { consumeEventEventName, documentTimeChangedEventName } from "../common";
 import { getGlobalMScene } from "../global";
-import { IMMLScene, ScenePosition } from "../MMLScene";
+import { IMMLScene, PositionAndRotation } from "../MMLScene";
 
 const MELEMENT_PROPERTY_NAME = "m-element-property";
 
@@ -43,7 +43,7 @@ export abstract class MElement extends HTMLElement {
   }
 
   public getScene(): IMMLScene {
-    const sceneAttachmentElement = this.closest("m-remote-document") || null;
+    const sceneAttachmentElement = this.getRemoteDocument();
     if (sceneAttachmentElement) {
       return (sceneAttachmentElement as RemoteDocument).getMScene();
     }
@@ -54,7 +54,7 @@ export abstract class MElement extends HTMLElement {
     return globalScene;
   }
 
-  private getRemoteDocument(): RemoteDocument | null {
+  public getRemoteDocument(): RemoteDocument | null {
     return this.closest("m-remote-document") || null;
   }
 
@@ -107,12 +107,12 @@ export abstract class MElement extends HTMLElement {
     return sceneAttachment.getCamera();
   }
 
-  getUserPosition(): ScenePosition {
+  getUserPositionAndRotation(): PositionAndRotation {
     const sceneAttachment = this.getScene();
     if (!sceneAttachment) {
       throw new Error("No scene to retrieve user position from");
     }
-    return sceneAttachment.getUserPosition();
+    return sceneAttachment.getUserPositionAndRotation();
   }
 
   getAudioListener(): THREE.AudioListener {