React Three Fiber中平滑精灵缩放：解决滚动事件滞后问题

本文深入探讨了在react three fiber中实现相机缩放时精灵（sprite）平滑缩放的常见问题。核心在于避免滚动事件处理中的性能陷阱，特别是当事件监听器被错误地放置在`useframe`等频繁执行的钩子中时。我们将通过对比错误的实现方式，详细阐述如何利用react的`useeffect`钩子正确管理事件监听器，并结合`usethree`和`useframe`在每帧更新精灵尺寸，从而消除视觉上的卡顿和滞后感，实现无缝的缩放体验。

引言：React Three Fiber中精灵缩放的挑战

在React Three Fiber (R3F) 应用中，当我们需要一个精灵（Sprite）的尺寸能够随着相机缩放而动态调整，以保持其在屏幕上的视觉大小不变时，可能会遇到性能瓶颈或视觉上的卡顿。尽管逻辑上可能认为在每帧更新精灵尺寸可以解决问题，但如果事件监听器的管理不当，反而会引入严重的性能问题，导致缩放动画出现明显的滞后或“闪烁”感。

问题分析：错误的事件监听器管理

最初遇到的问题是，在R3F组件中，尝试通过监听wheel事件来调整精灵的缩放比例，以抵消相机缩放的影响。核心代码片段如下：

function TestFunction() {
  const [scale, setScale] = useState(new Vector3(1, 1, 1));
  // ... 其他代码 ...

  let state = useThree();
  let zoom = state.camera.zoom / 100; // 假设zoom值需要调整
  let scaler: Vector3 = new Vector3(1 / zoom, 1 / zoom, 1 / zoom);

  const handleMouseScroll = (event: WheelEvent) => {
    scaler.set(1 / zoom, 1 / zoom, 1 / zoom);
    setScale(scaler);
  };

  useFrame(() => {
    // ⚠️ 错误：在useFrame中重复添加事件监听器
    window.document.addEventListener("wheel", handleMouseScroll, {
      capture: true,
      passive: true,
    });
  });

  return (
    <sprite scale={scale}>
      <spriteMaterial map={map} />
    </sprite>
  );
}

这段代码的问题在于将window.document.addEventListener("wheel", handleMouseScroll, ...)放置在了useFrame钩子内部。useFrame是一个在R3F中每帧都会执行的钩子，通常用于执行动画或更新三维场景中的对象属性。这意味着：

1. 事件监听器冗余： 每一帧（通常每秒60次）都会向window.document添加一个新的wheel事件监听器。这会导致页面上积累大量的重复监听器，严重消耗内存和CPU资源。
2. 性能下降： 大量的事件监听器会使得每次滚动事件触发时，需要执行的回调函数数量激增，从而导致性能显著下降，表现为动画卡顿和响应迟钝。
3. 状态更新延迟： 即使事件监听器只添加一次，通过useState更新精灵的scale也会导致组件重新渲染。在快速滚动的场景下，频繁的组件重新渲染可能跟不上帧率，导致视觉上的不连贯。

解决方案：useEffect与useFrame的协同

要解决上述问题，我们需要遵循React的副作用管理原则，并结合R3F的特性进行优化。

1. 使用useEffect管理事件监听器

React的useEffect钩子是管理组件副作用（如事件监听器、订阅等）的标准方式。它允许我们在组件挂载时添加监听器，并在组件卸载时进行清理，确保监听器只存在一份。

AliGenie 天猫精灵开放平台

天猫精灵开放平台

42

查看详情

import { useState, useEffect, useRef } from 'react';
import * as THREE from 'three';
import { useThree, useFrame } from '@react-three/fiber';

function TestFunction() {
  const spriteRef = useRef<THREE.Sprite>(null); // 使用ref直接访问Three.js对象
  const map = new THREE.TextureLoader().load("src/assets/Joshy.png");

  const { camera } = useThree(); // 获取R3F的相机对象

  // 优化：不再使用useState来管理scale，而是直接在useFrame中更新
  // const [scale, setScale] = useState(new THREE.Vector3(1, 1, 1));

  // useFrame负责每帧更新精灵尺寸
  useFrame(() => {
    if (spriteRef.current) {
      // 根据相机距离或zoom值计算精灵的理想缩放比例
      // 对于正交相机，通常与camera.zoom成反比
      // 对于透视相机，通常与精灵到相机的距离成正比
      const idealScale = 1 / (camera.zoom / 100); // 示例：假设zoom / 100是正确的比例因子
      spriteRef.current.scale.set(idealScale, idealScale, idealScale);
    }
  });

  // useEffect用于管理全局事件监听器，确保只添加一次并正确清理
  useEffect(() => {
    // 这里的wheel事件监听器可以用于其他与精灵缩放无关的逻辑
    // 如果精灵缩放完全由camera.zoom驱动，则可能不需要此处的wheel事件监听
    const handleGlobalWheel = (event: WheelEvent) => {
      // 例如：可以用于调整相机zoom，然后useFrame会自动更新精灵
      // console.log("Wheel event detected globally:", event.deltaY);
    };

    window.addEventListener('wheel', handleGlobalWheel, {
      capture: true,
      passive: true, // 标记为passive，提高滚动性能
    });

    // 清理函数：组件卸载时移除事件监听器
    return () => {
      window.removeEventListener('wheel', handleGlobalWheel);
    };
  }, []); // 空依赖数组确保只在组件挂载和卸载时执行一次

  return (
    <sprite ref={spriteRef}> {/* 将ref绑定到sprite */}
      <spriteMaterial map={map} />
    </sprite>
  );
}

2. 直接在useFrame中更新Three.js对象属性

对于需要每帧平滑更新的动画效果，最佳实践是直接在useFrame钩子中操作Three.js对象的属性（例如sprite.scale），而不是通过React的useState来触发组件重新渲染。useFrame本身就在渲染循环中，直接修改对象属性避免了React的协调（reconciliation）过程，从而获得最佳性能。

在上面的修正代码中：

• 我们移除了useState对scale的管理。
• 通过useRef获取到sprite的Three.js实例。
• 在useFrame中，我们直接访问spriteRef.current.scale并设置其值。
• 相机zoom的变化会由R3F内部处理并更新useThree返回的camera对象，useFrame会自然地捕获到这些变化并相应地更新精灵。

这种方式确保了精灵的缩放与相机状态的变化同步，且没有额外的React渲染开销，从而消除了视觉上的滞后感。

关键注意事项与最佳实践

1. passive: true： 在addEventListener中添加{ passive: true }对于wheel和touchstart等事件非常重要。它告诉浏览器事件监听器不会调用preventDefault()，从而允许浏览器在不等待事件处理完成的情况下执行默认的滚动行为，显著提升滚动性能。
2. react-three-drei： react-three-drei是一个非常强大的R3F实用工具库，提供了许多常用的抽象和钩子。例如，它可能包含专门用于实现屏幕空间不变精灵的组件或钩子，可以进一步简化开发。在实际项目中，强烈推荐查阅其文档，看看是否有现成的解决方案。
3. 缩放逻辑： 精灵的实际缩放逻辑（例如1 / (camera.zoom / 100)）需要根据你的具体相机类型（正交或透视）和期望的行为进行调整。对于正交相机，精灵尺寸通常与1 / camera.zoom成正比。对于透视相机，通常与精灵到相机的距离成正比。
4. 避免不必要的重新渲染： 尽可能在useFrame中直接操作Three.js对象，而不是通过useState触发React组件的重新渲染，尤其是在需要高频率更新的场景。

总结

在React Three Fiber中实现平滑的精灵缩放，关键在于正确管理事件监听器和高效地更新Three.js对象属性。通过将事件监听器的生命周期绑定到useEffect，确保其只被添加和清理一次，并利用useFrame直接在每帧更新Three.js精灵的缩放属性，我们可以避免性能瓶颈和视觉滞后，为用户提供流畅、专业的交互体验。理解React的副作用管理机制和R3F的渲染循环是构建高性能三维应用的基础。

以上就是React Three Fiber中平滑精灵缩放：解决滚动事件滞后问题的详细内容，更多请关注php中文网其它相关文章！