Update points.js

points.js

@@ -1,3 +1,5 @@
+//points.js 
+
 /**
  * initializePoints(options)
  *
@@ -37,7 +39,7 @@ export async function initializePoints(options) {
     return;
   }
 
-  const pointEntities = []; // store created sphere entities
+  const pointEntities = [];
 
   // Create a material for info-point spheres
   const mat = new pc.StandardMaterial();
@@ -46,53 +48,50 @@ export async function initializePoints(options) {
   mat.shininess = 20;
   mat.update();
 
-  // Create each sphere + attach custom data
+  // Build each sphere + attach custom data
   for (let i = 0; i < pointsData.length; i++) {
     const pt = pointsData[i];
     const { x, y, z, text, imageUrl } = pt;
 
-    // Create the sphere entity
     const sphere = new pc.Entity("point-" + i);
-    sphere.addComponent("model", {
-      type: "sphere"
-    });
+    sphere.addComponent("model", { type: "sphere" });
     sphere.model.material = mat;
 
-    // Scale it small (primitive sphere has radius=0.5 by default)
+    // Scale small (primitive sphere radius = 0.5)
     sphere.setLocalScale(0.05, 0.05, 0.05);
-
-    // Position is absolute world coordinates
     sphere.setLocalPosition(x, y, z);
-
-    // Attach custom data on entity for event details
     sphere.pointData = { text, imageUrl };
-
-    // Add to scene
     app.root.addChild(sphere);
     pointEntities.push(sphere);
   }
 
-  // Function to show/hide all point spheres
+  // Show/hide all point spheres
   function setPointsVisibility(visible) {
     pointEntities.forEach(ent => {
       ent.enabled = visible;
     });
   }
-  // Initial visibility
   setPointsVisibility(!!defaultVisible);
 
-  // Listen for toggle-points event from interface.js
+  // Respond to toggle-points event from interface.js
   document.addEventListener("toggle-points", (evt) => {
     const { visible } = evt.detail;
     setPointsVisibility(!!visible);
   });
 
-  // On mouse down, do a manual ray-sphere intersection test
+  // Keep track of any in-flight camera tween so we can cancel it
+  let currentTween = null;
+
+  // On mouse down (or touch equivalent), perform manual ray‐sphere intersection
   app.mouse.on(pc.EVENT_MOUSEDOWN, (event) => {
+    // If a tween is running, cancel it immediately
+    if (currentTween) {
+      app.off("update", currentTween);
+      currentTween = null;
+    }
+
     const x = event.x;
     const y = event.y;
-
-    // Build world-space ray from camera through screen pixel (x,y)
     const from = new pc.Vec3();
     const to   = new pc.Vec3();
     const camera = cameraEntity.camera;
@@ -100,29 +99,24 @@ export async function initializePoints(options) {
     cameraEntity.camera.screenToWorld(x, y, camera.nearClip, from);
     cameraEntity.camera.screenToWorld(x, y, camera.farClip, to);
 
-    // Compute ray direction
     const dir = new pc.Vec3().sub2(to, from).normalize();
 
-    // Ray-sphere intersection for each point; track closest hit
     let closestT = Infinity;
     let pickedEntity = null;
 
     for (const ent of pointEntities) {
       if (!ent.enabled) continue;
 
-      const center = ent.getPosition();       // world position of sphere center
-      // Primitive sphere radius = 0.5, scaled by ent.getLocalScale().x
+      const center = ent.getPosition();
       const worldRadius = 0.5 * ent.getLocalScale().x;
 
-      // Compute vector from ray origin to sphere center
       const oc = new pc.Vec3().sub2(center, from);
       const tca = oc.dot(dir);
-      if (tca < 0) continue; // sphere is behind ray origin
+      if (tca < 0) continue;
 
       const d2 = oc.lengthSq() - (tca * tca);
-      if (d2 > worldRadius * worldRadius) continue; // miss
+      if (d2 > worldRadius * worldRadius) continue;
 
-      // Compute half-chord distance
       const thc = Math.sqrt(worldRadius * worldRadius - d2);
       const t0 = tca - thc;
       if (t0 < closestT && t0 >= 0) {
@@ -132,76 +126,109 @@ export async function initializePoints(options) {
     }
 
     if (pickedEntity) {
-      // We clicked on a point sphere
       const { text, imageUrl } = pickedEntity.pointData;
-
-      // Dispatch an event so interface.js can show tooltip
       document.dispatchEvent(new CustomEvent("point-selected", {
         detail: { text, imageUrl }
       }));
-
-      // Smoothly move camera to face that point
-      moveCameraToPoint(pickedEntity.getPosition(), moveDuration);
+      tweenCameraToPoint(pickedEntity, moveDuration);
     }
   });
 
-  // Helper: smoothly move cameraEntity to look at `targetPos`
-  function moveCameraToPoint(targetPos, duration) {
-    const camStartPos = cameraEntity.getPosition().clone();
-    const camTargetPos = new pc.Vec3();
-    // Compute direction from camera to target, then back off by same distance
-    const dir = new pc.Vec3().sub2(camStartPos, targetPos).normalize();
-    const dist = camStartPos.distance(targetPos);
-    camTargetPos.copy(targetPos).add(dir.scale(dist));
+  // Also close tooltip if user interacts (mouse or touch) on the canvas
+  const canvasId = app.graphicsDevice.canvas.id;
+  const htmlCanvas = document.getElementById(canvasId);
+  if (htmlCanvas) {
+    htmlCanvas.addEventListener("mousedown", () => {
+      document.dispatchEvent(new CustomEvent("hide-tooltip"));
+    });
+    htmlCanvas.addEventListener("touchstart", () => {
+      document.dispatchEvent(new CustomEvent("hide-tooltip"));
+    });
+  }
+
+  // Tween helper: smoothly move and reorient camera to focus the chosen point entity
+  function tweenCameraToPoint(pointEnt, duration) {
+    const orbitCam = cameraEntity.script.orbitCamera;
+    if (!orbitCam) return;
+
+    // Compute target pivot exactly at the sphere center
+    const targetPos = pointEnt.getPosition().clone();
+    // Compute current state
+    const startPivot   = orbitCam.pivotPoint.clone();
+    const startYaw     = orbitCam._yaw;
+    const startPitch   = orbitCam._pitch;
+    const startDist    = orbitCam._distance;
+
+    // Compute direction & candidate distance:
+    const worldRadius  = 0.5 * pointEnt.getLocalScale().x;
+    const minZoom = orbitCam.distanceMin;
+    const desiredDistance = Math.max(minZoom * 1.2, worldRadius * 4);
+
+    // Compute target yaw/pitch from camera pointing at targetPos
+    // Reuse reset logic: place a temp entity at camera’s current position, have it look at target
+    const camWorldPos = cameraEntity.getPosition().clone();
+    const tempEnt = new pc.Entity();
+    tempEnt.setPosition(camWorldPos);
+    tempEnt.lookAt(targetPos);
+    const rotation = tempEnt.getRotation();
+    const forward = new pc.Vec3();
+    rotation.transformVector(pc.Vec3.FORWARD, forward);
+    const tgtYaw = Math.atan2(-forward.x, -forward.z) * pc.math.RAD_TO_DEG;
+    const yawQuat = new pc.Quat().setFromEulerAngles(0, -tgtYaw, 0);
+    const rotNoYaw = new pc.Quat().mul2(yawQuat, rotation);
+    const fNoYaw = new pc.Vec3();
+    rotNoYaw.transformVector(pc.Vec3.FORWARD, fNoYaw);
+    const tgtPitch = Math.atan2(fNoYaw.y, -fNoYaw.z) * pc.math.RAD_TO_DEG;
+    tempEnt.destroy();
+
+    // Target state:
+    const endPivot   = targetPos.clone();
+    const endYaw     = tgtYaw;
+    const endPitch   = tgtPitch;
+    const endDist    = desiredDistance;
 
     let elapsed = 0;
-    const orgPos = camStartPos.clone();
+    const orgPivot = startPivot.clone();
+    const orgYaw   = startYaw;
+    const orgPitch = startPitch;
+    const orgDist  = startDist;
+
+    // If another tween is running, cancel it
+    if (currentTween) {
+      app.off("update", currentTween);
+      currentTween = null;
+    }
 
-    // On update, interpolate
+    // Per-frame update
     function lerpUpdate(dt) {
       elapsed += dt;
       const t = Math.min(elapsed / duration, 1);
 
-      // Linear interpolation of position
-      const newPos = new pc.Vec3().lerp(orgPos, camTargetPos, t);
-      cameraEntity.setPosition(newPos);
-      cameraEntity.lookAt(targetPos);
+      // Interpolate pivot (vector lerp)
+      const newPivot = new pc.Vec3().lerp(orgPivot, endPivot, t);
+      orbitCam.pivotPoint.copy(newPivot);
+
+      // Interpolate yaw/pitch/distance (simple lerp)
+      const newYaw   = pc.math.lerp(orgYaw,   endYaw,   t);
+      const newPitch = pc.math.lerp(orgPitch, endPitch, t);
+      const newDist  = pc.math.lerp(orgDist,  endDist,  t);
+
+      orbitCam._targetYaw     = newYaw;
+      orbitCam._yaw           = newYaw;
+      orbitCam._targetPitch   = newPitch;
+      orbitCam._pitch         = newPitch;
+      orbitCam._targetDistance = newDist;
+      orbitCam._distance = newDist;
+
+      orbitCam._updatePosition();
 
       if (t >= 1) {
-        // Finalize pivot and distance in orbitCamera
-        const orbitCam = cameraEntity.script.orbitCamera;
-        if (orbitCam) {
-          const newDistance = cameraEntity.getPosition().distance(targetPos);
-          orbitCam.pivotPoint.copy(targetPos);
-          orbitCam._targetDistance = newDistance;
-          orbitCam._distance = newDistance;
-
-          // Recompute yaw & pitch exactly as resetViewerCamera does
-          const tempEnt = new pc.Entity();
-          tempEnt.setPosition(newPos);
-          tempEnt.lookAt(targetPos);
-          const rotation = tempEnt.getRotation();
-          const tempForward = new pc.Vec3();
-          rotation.transformVector(pc.Vec3.FORWARD, tempForward);
-
-          const yaw = Math.atan2(-tempForward.x, -tempForward.z) * pc.math.RAD_TO_DEG;
-          const yawQuat = new pc.Quat().setFromEulerAngles(0, -yaw, 0);
-          const rotWithoutYaw = new pc.Quat().mul2(yawQuat, rotation);
-          const forwardWithoutYaw = new pc.Vec3();
-          rotWithoutYaw.transformVector(pc.Vec3.FORWARD, forwardWithoutYaw);
-          const pitch = Math.atan2(forwardWithoutYaw.y, -forwardWithoutYaw.z) * pc.math.RAD_TO_DEG;
-
-          orbitCam._targetYaw = yaw;
-          orbitCam._yaw = yaw;
-          orbitCam._targetPitch = pitch;
-          orbitCam._pitch = pitch;
-          orbitCam._updatePosition();
-
-          tempEnt.destroy();
-        }
-        app.off('update', lerpUpdate);
+        app.off("update", lerpUpdate);
+        currentTween = null;
       }
     }
-    app.on('update', lerpUpdate);
+
+    currentTween = lerpUpdate;
+    app.on("update", lerpUpdate);
   }
 }