在react-three-fiber中实现类似Model Viewer的触摸交互效果

引言

在移动端开发3D应用时，如何优雅地处理触摸交互是一个常见挑战。react-three-fiber作为Three.js的React封装，提供了强大的3D渲染能力，但在处理复杂的触摸交互时仍需要一些技巧。本文将详细介绍如何在react-three-fiber中实现类似Model Viewer的触摸交互效果，即区分水平滑动（用于3D模型操作）和垂直滑动（用于页面滚动）。

核心思路

要实现这种交互效果，关键在于识别用户的滑动方向并做出相应处理：

1. 当用户水平滑动时，启用OrbitControls进行3D模型旋转
2. 当用户垂直滑动时，允许页面正常滚动
3. 需要准确判断滑动的初始方向

实现方案

1. 基础组件设置

首先需要设置基本的react-three-fiber场景，并引入drei库中的OrbitControls：

import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

function App() {
  return (
    <Canvas>
      {/* 场景内容 */}
      <OrbitControls />
    </Canvas>
  );
}

2. 触摸事件处理

核心在于处理触摸事件，判断滑动方向：

const controlsRef = useRef();
const [isHorizontalPan, setIsHorizontalPan] = useState(false);

const handleTouchStart = (event) => {
  const touch = event.touches[0];
  controlsRef.current.startX = touch.clientX;
  controlsRef.current.startY = touch.clientY;
  controlsRef.current.moved = false;
};

const handleTouchMove = (event) => {
  const touch = event.touches[0];
  const deltaX = touch.clientX - controlsRef.current.startX;
  const deltaY = touch.clientY - controlsRef.current.startY;

  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    setIsHorizontalPan(true);
    controlsRef.current.moved = true;
    event.preventDefault(); // 阻止默认滚动行为
  } else if (!controlsRef.current.moved) {
    setIsHorizontalPan(false);
  }
};

const handleTouchEnd = () => {
  controlsRef.current.moved = false;
};

3. 整合到Canvas组件

将事件处理器绑定到Canvas组件：

<Canvas
  onTouchStart={handleTouchStart}
  onTouchMove={handleTouchMove}
  onTouchEnd={handleTouchEnd}
>
  {/* 场景内容 */}
  <OrbitControls 
    ref={controlsRef} 
    enablePan={isHorizontalPan} 
  />
</Canvas>

优化与注意事项

1. 性能考虑：频繁的触摸事件处理可能会影响性能，建议使用防抖或节流技术优化

2. 边界情况处理：

   • 处理多点触控
   • 考虑触摸中断的情况
   • 处理快速滑动后的惯性效果

3. 用户体验优化：

   • 添加视觉反馈，让用户知道当前是模型操作模式还是滚动模式
   • 调整灵敏度阈值，使方向判断更符合用户预期

4. 兼容性考虑：

   • 测试不同移动设备上的表现
   • 考虑不同浏览器对触摸事件的支持差异

完整示例代码

import React, { useRef, useState } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

const Box = (props) => {
  const mesh = React.useRef();
  useFrame(() => {
    mesh.current.rotation.x += 0.01;
    mesh.current.rotation.y += 0.01;
  });
  return (
    <mesh {...props} ref={mesh}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={'orange'} />
    </mesh>
  );
};

const App = () => {
  const controlsRef = useRef();
  const [isHorizontalPan, setIsHorizontalPan] = useState(false);

  const handleTouchStart = (event) => {
    const touch = event.touches[0];
    controlsRef.current.startX = touch.clientX;
    controlsRef.current.startY = touch.clientY;
    controlsRef.current.moved = false;
  };

  const handleTouchMove = (event) => {
    const touch = event.touches[0];
    const deltaX = touch.clientX - controlsRef.current.startX;
    const deltaY = touch.clientY - controlsRef.current.startY;

    if (Math.abs(deltaX) > Math.abs(deltaY)) {
      setIsHorizontalPan(true);
      controlsRef.current.moved = true;
      event.preventDefault();
    } else if (!controlsRef.current.moved) {
      setIsHorizontalPan(false);
    }
  };

  const handleTouchEnd = () => {
    controlsRef.current.moved = false;
  };

  return (
    <Canvas
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Box position={[-1.2, 0, 0]} />
      <Box position={[1.2, 0, 0]} />
      <OrbitControls ref={controlsRef} enablePan={isHorizontalPan} />
    </Canvas>
  );
};

export default App;

总结

在react-three-fiber中实现类似Model Viewer的触摸交互效果，关键在于准确识别用户滑动方向并做出相应处理。通过合理使用触摸事件和OrbitControls的配置，可以创建出既支持3D模型交互又允许页面滚动的流畅体验。开发者可以根据实际需求调整判断阈值和交互细节，以获得最佳的用户体验。

这种实现方式不仅适用于简单的3D模型展示，也可以扩展到更复杂的交互场景中，如产品展示、教育应用等需要同时支持3D操作和内容浏览的场景。