在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模型操作)和垂直滑动(用于页面滚动)。
核心思路
要实现这种交互效果,关键在于识别用户的滑动方向并做出相应处理:
- 当用户水平滑动时,启用OrbitControls进行3D模型旋转
- 当用户垂直滑动时,允许页面正常滚动
- 需要准确判断滑动的初始方向
实现方案
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>
优化与注意事项
-
性能考虑:频繁的触摸事件处理可能会影响性能,建议使用防抖或节流技术优化
-
边界情况处理:
- 处理多点触控
- 考虑触摸中断的情况
- 处理快速滑动后的惯性效果
-
用户体验优化:
- 添加视觉反馈,让用户知道当前是模型操作模式还是滚动模式
- 调整灵敏度阈值,使方向判断更符合用户预期
-
兼容性考虑:
- 测试不同移动设备上的表现
- 考虑不同浏览器对触摸事件的支持差异
完整示例代码
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操作和内容浏览的场景。
登录后查看全文
热门内容推荐
1 freeCodeCamp猫照片应用教程中的HTML注释测试问题分析2 freeCodeCamp论坛排行榜项目中的错误日志规范要求3 freeCodeCamp课程页面空白问题的技术分析与解决方案4 freeCodeCamp课程视频测验中的Tab键导航问题解析5 freeCodeCamp全栈开发课程中React组件导出方式的衔接问题分析6 freeCodeCamp全栈开发课程中React实验项目的分类修正7 freeCodeCamp英语课程填空题提示缺失问题分析8 freeCodeCamp Cafe Menu项目中link元素的void特性解析9 freeCodeCamp课程中屏幕放大器知识点优化分析10 freeCodeCamp JavaScript高阶函数中的对象引用陷阱解析
最新内容推荐
eBPF for Windows项目中用户空间写入环形缓冲区的API设计探讨 Stability-AI/stable-audio-tools项目中的模型微调实践指南 Neovim配置实战:解决插入模式下Ctrl+Backspace映射失效问题 BlenderProc中自定义安装路径与临时目录配置指南 Photon图像处理库中的Sobel边缘检测实现优化 Orange Pi 5 Pro在Ubuntu 24.04下的WiFi/蓝牙问题分析与解决方案 Lan-Mouse项目在MacOS多显示器环境下的光标限制问题解析 Positron项目中SSH连接WSL时Python语法高亮异常的解决方案 使用Apollo和Tailscale实现Moonlight远程游戏串流的技术方案 Flox项目中环境嵌套激活的Profile Hook问题解析
项目优选
收起

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer(第 2 版)》、《程序员面试金典(第 6 版)》题解
Java
51
14

🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
461
377

React Native鸿蒙化仓库
C++
102
183

openGauss kernel ~ openGauss is an open source relational database management system
C++
55
126

本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
278
500

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件,通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求,让密码技术应用更简单,同时探索后量子等先进算法创新实践,构建密码前沿技术底座!
C
88
246

前端智能化场景解决方案UI库,轻松构建你的AI应用,我们将持续完善更新,欢迎你的使用与建议。
官网地址:https://matechat.gitcode.com
681
82

open-eBackup是一款开源备份软件,采用集群高扩展架构,通过应用备份通用框架、并行备份等技术,为主流数据库、虚拟化、文件系统、大数据等应用提供E2E的数据备份、恢复等能力,帮助用户实现关键数据高效保护。
HTML
109
73

本仓将收集和展示仓颉鸿蒙应用示例代码,欢迎大家投稿,在仓颉鸿蒙社区展现你的妙趣设计!
Cangjie
346
243

A high-quality tool for convert PDF to Markdown and JSON.一站式开源高质量数据提取工具,将PDF转换成Markdown和JSON格式。
Python
12
1