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

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

2025-05-05 19:52:39作者:咎竹峻Karen

引言

在移动端开发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操作和内容浏览的场景。

登录后查看全文
热门项目推荐
相关项目推荐

项目优选

收起
leetcodeleetcode
🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer(第 2 版)》、《程序员面试金典(第 6 版)》题解
Java
51
14
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
461
377
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
C++
102
183
openGauss-serveropenGauss-server
openGauss kernel ~ openGauss is an open source relational database management system
C++
55
126
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
278
500
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件,通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求,让密码技术应用更简单,同时探索后量子等先进算法创新实践,构建密码前沿技术底座!
C
88
246
MateChatMateChat
前端智能化场景解决方案UI库,轻松构建你的AI应用,我们将持续完善更新,欢迎你的使用与建议。 官网地址:https://matechat.gitcode.com
681
82
open-eBackupopen-eBackup
open-eBackup是一款开源备份软件,采用集群高扩展架构,通过应用备份通用框架、并行备份等技术,为主流数据库、虚拟化、文件系统、大数据等应用提供E2E的数据备份、恢复等能力,帮助用户实现关键数据高效保护。
HTML
109
73
HarmonyOS-ExamplesHarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码,欢迎大家投稿,在仓颉鸿蒙社区展现你的妙趣设计!
Cangjie
346
243
MinerUMinerU
A high-quality tool for convert PDF to Markdown and JSON.一站式开源高质量数据提取工具,将PDF转换成Markdown和JSON格式。
Python
12
1