使用 ScrollControls 实现触摸控制滚动

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

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

问题根源：控制器冲突

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

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

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

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

千图设计室AI海报

千图网旗下的智能海报在线设计平台

172

查看详情

假设您有一个类似以下结构的 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 /> 组件。通过移除或禁用 OrbitControls，触摸事件将不再被其捕获，从而允许 ScrollControls 正常处理滚动事件。

其他注意事项

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

总结

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

以上就是使用 ScrollControls 实现触摸控制滚动的详细内容，更多请关注php中文网其它相关文章！