Viewer world space hotspots (#15833)

packages/tools/viewer-alpha/src/viewer.ts

@@ -153,17 +153,34 @@ export type ViewerOptions = Partial<
 
 export type EnvironmentOptions = Partial<Readonly<{}>>;
 
-export type ViewerHotSpotQuery = {
-    /**
-     * The type of the hot spot.
-     */
-    type: "surface";
-
-    /**
-     * The index of the mesh within the loaded model.
-     */
-    meshIndex: number;
-} & HotSpotQuery;
+export type ViewerHotSpotQuery =
+    | ({
+          /**
+           * The type of the hot spot.
+           */
+          type: "surface";
+
+          /**
+           * The index of the mesh within the loaded model.
+           */
+          meshIndex: number;
+      } & HotSpotQuery)
+    | {
+          /**
+           * The type of the hot spot.
+           */
+          type: "world";
+
+          /**
+           * The fixed world space position of the hot spot.
+           */
+          position: [x: number, y: number, z: number];
+
+          /**
+           * The fixed world space normal of the hot spot.
+           */
+          normal: [x: number, y: number, z: number];
+      };
 
 /**
  * Provides the result of a hot spot query.
@@ -837,14 +854,21 @@ export class Viewer implements IDisposable {
         if (!this._details.model) {
             return false;
         }
+
         const worldNormal = this._vector3[2];
         const worldPos = this._vector3[1];
         const screenPos = this._vector3[0];
-        const mesh = this._details.model.meshes[query.meshIndex];
-        if (!mesh) {
-            return false;
+
+        if (query.type === "surface") {
+            const mesh = this._details.model.meshes[query.meshIndex];
+            if (!mesh) {
+                return false;
+            }
+            GetHotSpotToRef(mesh, query, worldPos, worldNormal);
+        } else {
+            worldPos.copyFromFloats(query.position[0], query.position[1], query.position[2]);
+            worldNormal.copyFromFloats(query.normal[0], query.normal[1], query.normal[2]);
         }
-        GetHotSpotToRef(mesh, query, worldPos, worldNormal);
 
         const renderWidth = this._engine.getRenderWidth(); // Get the canvas width
         const renderHeight = this._engine.getRenderHeight(); // Get the canvas height

packages/tools/viewer-alpha/src/viewerAnnotationElement.ts

@@ -31,7 +31,6 @@ export class HTML3DAnnotationElement extends LitElement {
         }
     `;
 
-    // TODO: Remove the "as any" after TypeScript is updated to 5.5 or higher.
     private readonly _internals = this.attachInternals();
     private _viewerAttachment: Nullable<IDisposable> = null;
 

packages/tools/viewer-alpha/test/apps/web/index.html

@@ -113,6 +113,12 @@
                     "meshIndex": 1,
                     "pointIndex": [228, 113, 111],
                     "barycentric": [0.217, 0.341, 0.442]
+                },
+                "poi": {
+                    "type": "world",
+                    "position": [0.37435858930052035, 0.5999379610676736, 0.021725763097220963],
+                    "normal": [0.6903377419741442, 0.44314472456113957, -0.5718885862645555],
+                    "cameraOrbit": [-32.108, 1.112, 1.714]
                 }
             }'
         >
@@ -132,6 +138,9 @@
             <babylon-viewer-annotation hotspot="thruster">
                 <div style="background-color: aliceblue; border-radius: 8px; padding: 3px 6px;">Thruster</div>
             </babylon-viewer-annotation>
+            <babylon-viewer-annotation hotspot="poi">
+                <div style="background-color: aliceblue; border-radius: 8px; padding: 3px 6px;">World Space POI</div>
+            </babylon-viewer-annotation>
         </babylon-viewer>
         <button class="toggle-dom-button" onclick="onToggleDOM()">Toggle DOM</button>
         <button class="toggle-engine-button" onclick="onToggleEngine()">Toggle Engine</button>