告别僵硬交互：用Hammer.js为Three.js 3D场景注入丝滑手势控制

你是否曾为3D场景中笨拙的鼠标操作感到沮丧？旋转模型时总错过精确角度，缩放物体时难以控制尺度？本文将带你用Hammer.js与Three.js打造如手机触屏般直观的3D交互体验，无需复杂算法即可实现旋转、缩放、平移等核心手势控制。

技术选型：为什么是Hammer.js？

Hammer.js是专注于手势识别的轻量级JavaScript库，通过src/recognizers/目录下的手势识别器实现多种触摸操作：

• 旋转手势：RotateRecognizer
• 缩放手势：PinchRecognizer
• 平移手势：PanRecognizer
• 点击验证：TapRecognizer

这些预构建的手势识别模块可直接集成到Three.js项目中，避免从零开发手势逻辑的重复劳动。

环境准备与基础配置

安装依赖

npm install three hammerjs

引入核心库

<!-- 国内CDN引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

实现3D手势控制的核心步骤

1. 初始化Three.js场景

// 创建基础场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加立方体模型
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;

2. 绑定Hammer.js手势识别器

// 获取渲染画布元素
const canvas = renderer.domElement;

// 初始化Hammer管理器
const manager = new Hammer.Manager(canvas);

// 添加旋转手势识别器 [src/recognizers/rotate.js]
const rotate = new Hammer.Rotate();
rotate.recognizeWith(manager);

// 添加缩放手势识别器 [src/recognizers/pinch.js]
const pinch = new Hammer.Pinch();
pinch.recognizeWith([rotate]);

// 添加平移手势识别器 [src/recognizers/pan.js]
const pan = new Hammer.Pan({ direction: Hammer.DIRECTION_ALL });
pan.recognizeWith([rotate, pinch]);

3. 实现手势与3D变换的映射

// 存储变换状态
let currentRotation = 0;
let currentScale = 1;
let currentPosition = new THREE.Vector2(0, 0);

// 旋转处理
manager.on('rotate', (e) => {
  const deltaRotation = e.rotation - currentRotation;
  cube.rotation.y += deltaRotation * Math.PI / 180;
  currentRotation = e.rotation;
});

// 缩放处理
manager.on('pinch', (e) => {
  currentScale = e.scale;
  cube.scale.set(currentScale, currentScale, currentScale);
});

// 平移处理
manager.on('pan', (e) => {
  currentPosition.x += e.deltaX * 0.01;
  currentPosition.y -= e.deltaY * 0.01;
  cube.position.set(currentPosition.x, currentPosition.y, 0);
});

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

关键技术解析

手势识别原理

Hammer.js通过src/manager.js协调多个手势识别器，使用状态机模式处理手势生命周期：

• 开始阶段：识别器检测到潜在手势
• 变化阶段：持续跟踪手势数据（如旋转角度、缩放比例）
• 结束阶段：确认手势完成并触发最终事件

这种架构确保了复杂手势（如旋转+缩放同时进行）的流畅识别。

性能优化策略

1. 手势并发控制：使用recognizeWith()API实现多手势协同
2. 事件节流：通过src/utils/set-timeout-context.js控制事件触发频率
3. 渲染优化：Three.js内置的WebGL渲染器已针对GPU加速优化

常见问题解决方案

手势冲突处理

当多个手势可能同时触发时（如平移和缩放），可通过优先级设置解决：

// 设置识别器优先级
manager.get('pinch').set({ priority: 1 });
manager.get('pan').set({ priority: 2 });

惯性动画实现

添加手势结束后的平滑过渡效果：

manager.on('rotateend', () => {
  // 使用TWEEN.js实现惯性旋转
  new TWEEN.Tween(cube.rotation)
    .to({ y: cube.rotation.y + 0.1 }, 300)
    .easing(TWEEN.Easing.Quadratic.Out)
    .start();
});

项目扩展方向

1. 高级手势支持：集成src/recognizers/swipe.js实现模型切换
2. 多点触控优化：参考src/input/touch.js实现多手指精确控制
3. VR交互扩展：结合WebXR API将手势控制扩展到VR场景

完整示例代码

可参考项目测试中的交互演示结构：tests/manual/visual.html，该文件展示了Hammer.js核心手势的可视化测试界面。

通过上述步骤，我们成功将Hammer.js的手势识别能力与Three.js的3D渲染引擎结合，创建了直观的交互式3D体验。这种方案已广泛应用于在线3D模型查看器、WebGL游戏和数据可视化领域。完整实现可通过以下命令获取项目源码：

git clone https://gitcode.com/gh_mirrors/ham/hammer.js

继续探索src/recognizers/目录下的其他手势识别器，你可以实现更复杂的交互逻辑，如双击放大、长按菜单等高级功能。