使用 ScrollControls 实现触摸控制滚动

本文将介绍如何在使用 ScrollControls 的场景下启用触摸控制滚动。通过解决 OrbitControls 与 ScrollControls 之间的冲突，提供了一种简单有效的解决方案，使您的应用在触摸设备上也能流畅滚动。

在使用 Three.js 开发 Web 3D 应用时，ScrollControls 提供了一种便捷的方式来实现基于滚动的动画效果。然而，在触摸设备上，用户期望通过触摸滑动来控制滚动，但有时可能会遇到无法直接使用触摸控制滚动的问题。这通常是因为 OrbitControls 等其他控制器的干扰。

问题根源：控制器冲突

导致触摸滚动失效的常见原因是 OrbitControls 与 ScrollControls 之间的冲突。OrbitControls 主要用于通过鼠标或触摸手势来旋转、缩放和平移场景，而 ScrollControls 则专注于根据页面滚动来驱动动画。当两者同时启用时，触摸事件可能会被 OrbitControls 优先捕获，导致 ScrollControls 无法正常工作。

解决方案：禁用冲突控制器

最简单的解决方案是禁用 OrbitControls 或其他与 ScrollControls 冲突的控制器。具体来说，如果您希望完全依赖 ScrollControls 来实现滚动控制，则需要确保 OrbitControls 处于禁用状态。

示例代码（基于 CodeSandbox 示例的修改）

假设您有一个类似以下结构的 React 组件：

import { useRef, useEffect } from 'react'; import { Canvas, useFrame } from '@react-three/fiber'; import { ScrollControls, OrbitControls } from '@react-three/drei'; import * as THREE from 'three';  function Scene() {   const mesh = useRef();    useFrame((state, delta) => {     // 示例动画：旋转立方体     mesh.current.rotation.x += 0.01;     mesh.current.rotation.y += 0.01;   });    return (     <mesh ref={mesh}>       <boxGeometry />       <meshStandardMaterial color="orange" />     </mesh>   ); }  function App() {   return (     <Canvas>       {/* 禁用 OrbitControls */}       {/* <OrbitControls /> */}       <ScrollControls pages={3}>         <Scene />       </ScrollControls>       <ambientLight intensity={0.5} />       <directionalLight position={[10, 10, 5]} />     </Canvas>   ); }  export default App;

在这个例子中，关键是注释掉 组件。通过移除或禁用 OrbitControls，触摸事件将不再被其捕获，从而允许 ScrollControls 正常处理滚动事件。

其他注意事项

• 确保 ScrollControls 正确配置： 检查 ScrollControls 的 pages 属性是否正确设置，以匹配您希望滚动的页面数量。
• CSS 样式： 某些 CSS 样式可能会干扰触摸滚动。确保没有冲突的样式，例如 overflow: hidden 或 touch-action: none。
• 移动设备调试： 使用移动设备或移动设备模拟器进行测试，以确保触摸滚动在目标设备上正常工作。

总结

通过禁用与 ScrollControls 冲突的控制器，例如 OrbitControls，可以轻松启用触摸控制滚动。确保 ScrollControls 正确配置，并注意潜在的 CSS 样式冲突，以获得最佳的触摸滚动体验。这个简单的解决方案可以显著改善您的 Web 3D 应用在触摸设备上的用户体验。