update how it works

src/modules/how-it-works-3d/components/TruckAnimation.jsx

@@ -38,6 +38,14 @@ export default function TruckAnimation({ truckRef, wheelRefs }) {
   useFrame((state, delta) => {
     if (!truckRef.current) return
 
+    // r3f can emit delta === 0 (coincident frames, the first frame, or after a
+    // long main-thread block while the 32MB scene parses). maath's easing.damp
+    // divides by delta internally, so a 0 yields NaN/Infinity that poisons the
+    // damper's stored velocity — and from then on truckPath.getPoint(NaN) throws
+    // "Cannot read properties of undefined (reading 'x')". Clamp delta to a safe
+    // positive range before any damping.
+    const dt = Number.isFinite(delta) && delta > 0 ? Math.min(delta, 0.1) : 1 / 60
+
     // Detect scroll direction changes from the actual page scroll progress
     const deltaScroll = scrollProgress - lastScrollProgressRef.current
     if (deltaScroll < -0.0001) {
@@ -95,7 +103,15 @@ export default function TruckAnimation({ truckRef, wheelRefs }) {
     }
 
     // Smoothly damp the 1D progress scalar along the curve path
-    easing.damp(dampedProgressRef, 'current', truckProgress, 0.30, delta)
+    easing.damp(dampedProgressRef, 'current', truckProgress, 0.30, dt)
+
+    // Defensive: keep the spline parameter a finite value in [0,1]. getPoint(NaN)
+    // or an out-of-range t reads an undefined curve point and throws.
+    if (!Number.isFinite(dampedProgressRef.current)) {
+      dampedProgressRef.current = truckProgress
+      if (dampedProgressRef.__damp) dampedProgressRef.__damp = {} // clear any poisoned velocity
+    }
+    dampedProgressRef.current = THREE.MathUtils.clamp(dampedProgressRef.current, 0, 1)
 
     // Evaluate the 3D position and orientation directly on the spline curve
     const position = truckPath.getPoint(dampedProgressRef.current)
@@ -128,7 +144,7 @@ export default function TruckAnimation({ truckRef, wheelRefs }) {
     }
 
     // Smoothly damp the extra rotation angle directly (prevents pitch/roll glitches or 3D target collapse)
-    easing.damp(extraRotationRef, 'current', targetExtraRotation, 0.20, delta)
+    easing.damp(extraRotationRef, 'current', targetExtraRotation, 0.20, dt)
 
     // Apply the yaw pivot around the local vertical axis
     truckRef.current.rotateY(extraRotationRef.current)