AR项目中使用Hammer.js捏合事件缩放3D模型遇异常求解决

Hey, great job getting the move/rotate/place functionality working with Hammer.js in your AR project! Those pinch scaling bugs are definitely tricky, but let's walk through each issue and fix them one by one:

1. Scaling only takes effect after multiple gestures #

This usually happens if you're either relying on the pinchend event instead of pinchmove to update your model, or not properly syncing the gesture's scale data to your model's current state in real-time. Hammer.js provides continuous updates during the pinch via pinchmove—if you wait until the gesture ends, you'll miss those incremental changes.

Fix:

• Use pinchmove to update the model's scale as the user performs the gesture.
• Track the model's current scale, and calculate the new scale relative to the gesture's starting scale (not the model's original base scale).

Here's an adjusted code snippet to handle this:

// Track your model's current scale state
let currentScale = 1;
let gestureStartScale = 1;

// Set up Hammer.js for pinch gestures
const hammer = new Hammer(yourARCanvasElement);
hammer.get('pinch').set({ enable: true });

// Capture the current scale when the pinch starts
hammer.on('pinchstart', (e) => {
  gestureStartScale = currentScale;
});

// Update scale continuously during the pinch
hammer.on('pinchmove', (e) => {
  // Calculate new scale by multiplying the starting scale of the gesture with Hammer's scale factor
  currentScale = gestureStartScale * e.scale;
  // Apply the scale to your 3D model (adjust based on your AR framework's API)
  your3DModel.scale.set(currentScale, currentScale, currentScale);
});

2. Model suddenly flips upside-down #

This is almost always caused by a negative scale value. When users cross their fingers during a pinch, Hammer.js's e.scale can dip below 0, which applies a negative scale to your model—flipping it along the axis you're scaling.

Fix:

• Clamp the scale value to a small positive minimum (like 0.1) to prevent negative scales entirely.
• Make sure you're scaling uniformly across all three axes (x, y, z) to avoid unintended skewing or flipping.

Update the pinchmove handler to add clamping:

hammer.on('pinchmove', (e) => {
  currentScale = gestureStartScale * e.scale;
  // Clamp scale to a safe range (adjust max/min as needed for your project)
  currentScale = Math.max(0.1, Math.min(currentScale, 5));
  your3DModel.scale.set(currentScale, currentScale, currentScale);
});

3. Can't shrink the model #

If you can only enlarge the model but not shrink it, check two common culprits:

• You're using addition instead of multiplication to calculate scale (e.g., currentScale += e.scale instead of currentScale = gestureStartScale * e.scale). Addition will only increase the scale over time, while multiplication respects the gesture's shrink/expand direction.
• There's a hardcoded check that blocks scale values below 1 (like if (currentScale < 1) return) which prevents shrinking.

Fix:

• Double-check your scale calculation logic to ensure it's multiplicative (relative to the gesture's starting scale).
• Remove any hardcoded minimum scale constraints that lock the scale at 1 or higher.

Quick Debugging Tip #

Even though you said the console shows matching values, log the final currentScale after clamping in your pinchmove handler to confirm it's actually updating to smaller values when you pinch to shrink. This can help you spot if your AR framework is overriding the scale behind the scenes.

内容的提问来源于stack exchange，提问作者Yoni Binstock