第六章：动画(Animation)

在本章节中，我们将学习如何在React+Three.js应用程序中实现动画效果。我们将探讨如何使用React来控制Three.js动画，并利用React状态和生命周期来创建流畅的动画效果。

1. 使用React控制Three.js动画

在React+Three.js应用程序中，我们可以使用React来控制动画的开始、停止和状态变化。通过React的状态管理，我们可以灵活地控制动画的执行，并在需要时暂停或重启动画。

让我们来创建一个简单的旋转动画，并使用React按钮来控制动画的播放和暂停：

import React, { useRef, useEffect, useState } from 'react';
import * as THREE from 'three';
import CustomGeometry from './CustomGeometry';

const ThreeScene = () => {
  // ...

  // 使用useState来跟踪动画状态
  const [isAnimating, setIsAnimating] = useState(true);

  useEffect(() => {
    // ...

    // 创建自定义几何体和材质
    const customGeometry = new THREE.Geometry();
    // ...

    const customMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
    const customMesh = new THREE.Mesh(customGeometry, customMaterial);
    meshRef.current = customMesh;
    scene.current.add(customMesh);

    // ...

    // 创建动画函数
    const animate = () => {
      if (isAnimating) {
        requestAnimationFrame(animate);

        // 使自定义几何体旋转
        customMesh.rotation.x += 0.01;
        customMesh.rotation.y += 0.01;

        // 使用渲染器来渲染场景
        renderer.current.render(scene.current, camera.current);
      }
    };

    // 开始动画
    animate();

    // 在组件卸载时，停止动画
    return () => {
      setIsAnimating(false);
    };
  }, [isAnimating]);

  // ...

  // 切换动画状态
  const toggleAnimation = () => {
    setIsAnimating((prevAnimating) => !prevAnimating);
  };

  return (
    <div>
      <div ref={sceneRef} />
      <button onClick={toggleWireframe}>切换显示模式</button>
      <input
        type="range"
        min="0"
        max="2"
        step="0.1"
        value={pointLightIntensity}
        onChange={handleIntensityChange}
      />
      <button onClick={toggleAnimation}>{isAnimating ? '暂停动画' : '开始动画'}</button>
    </div>
  );
};

export default ThreeScene;

在上述代码中，我们使用useState钩子来跟踪动画的状态。我们创建了一个名为isAnimating的状态来表示动画是否正在播放。然后，我们添加了一个动画函数animate，在其中我们更新自定义几何体的旋转，并使用渲染器来渲染场景。通过requestAnimationFrame函数，我们实现了动画的连续播放。

我们还添加了一个按钮，并通过toggleAnimation函数来切换动画的播放和暂停状态。

通过这样的实现，我们可以使用React来控制Three.js动画，使动画的播放和暂停更加灵活和易于控制。

2. 利用React状态和生命周期创建动画效果

在React+Three.js应用程序中，我们可以利用React的状态和生命周期方法来创建更复杂和细腻的动画效果。

例如，我们可以使用React状态来控制自定义几何体的位置和缩放，从而实现平滑的过渡效果：

import React, { useRef, useEffect, useState } from 'react';
import * as THREE from 'three';
import CustomGeometry from './CustomGeometry';

const ThreeScene = () => {
  // ...

  // 使用useState来跟踪自定义几何体的位置和缩放
  const [position, setPosition] = useState({ x: 0, y: 0, z: 0 });
  const [scale, setScale] = useState({ x: 1, y: 1, z: 1 });

  useEffect(() => {
    // ...

    // 创建自定义几何体和材质
    const customGeometry = new THREE.Geometry();
    // ...

    const customMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
    const customMesh = new THREE.Mesh(customGeometry, customMaterial);
    meshRef.current = customMesh;
    scene.current.add(customMesh);

    // ...

  }, []);

  useEffect(() => {
    // 在位置或缩放状态变化时，实现平滑过渡效果
    const animateTransitions = () => {
      const targetPosition = new THREE.Vector3(position.x, position.y, position.z);
      const targetScale = new THREE.Vector3(scale.x, scale.y, scale.z);

      customMesh.position.lerp(targetPosition, 0.1);
      customMesh.scale.lerp(targetScale, 0.1);
    };

    // 使用requestAnimationFrame来实现平滑过渡
    const animate = () => {
      if (isAnimating) {
        requestAnimationFrame(animate);
        animateTransitions();

        customMesh.rotation.x += 0.01;
        customMesh.rotation.y += 0.01;

        renderer.current.render(scene.current, camera.current);
      }
    };

    animate();

    // 在组件卸载时，停止动画
    return () => {
      setIsAnimating(false);
    };
  }, [isAnimating, position, scale]);

  // ...

  // 更新位置和缩放状态
  const handlePositionChange = (event) => {
    const { name, value } = event.target;
    setPosition((prevPosition) => ({
      ...prevPosition,
      [name]: parseFloat(value),
    }));
  };

  const handleScaleChange = (event) => {
    const { name, value } = event.target;
    setScale((prevScale) => ({
      ...prevScale,
      [name]: parseFloat(value),
    }));
  };

  return (
    <div>
      <div ref={sceneRef} />
      <button onClick={toggleWireframe}>切换显示模式</button>
      <input
        type="range"
        min="0"
        max="2"
        step="0.1"
        value={pointLightIntensity}
        onChange={handleIntensityChange}
      />
      <button onClick={toggleAnimation}>{isAnimating ? '暂停动画' : '开始动画'}</button>
      <div>
        <label>X位置：</label>
        <input
          type="range"
          min="-2"
          max="2"
          step="0.1"
          name="x"
          value={position.x}
          onChange={handlePositionChange}
        />
      </div>
      <div>
        <label>Y位置：</label>
        <input
          type="range"
          min="-2"
          max="2"
          step="0.1"
          name="y"
          value={position.y}
          onChange={handlePositionChange}
        />
      </div>
      <div>
        <label>Z位置：</label>
        <input
          type="range"
          min="-2"
          max="2"
          step="0.1"
          name="z"
          value={position.z}
          onChange={handlePositionChange}
        />
      </div>
      <div>
        <label>X缩放：</label>
        <input
          type="range"
          min="0.5"
          max="2"
          step="0.1"
          name="x"
          value={scale.x}
          onChange={handleScaleChange}
        />
      </div>
      <div>
        <label>Y缩放：</label>
        <input
          type="range"
          min="0.5"
          max="2"
          step="0.1"
          name="y"
          value={scale.y}
          onChange={handleScaleChange}
        />
      </div>
      <div>
        <label>Z缩放：</label>
        <input
          type="range"
          min="0.5"
          max="2"
          step="0.1"
          name="z"
          value={scale.z}
          onChange={handleScaleChange}
        />
      </div>
    </div>
  );
};

export default ThreeScene;

在上述代码中，我们使用useState钩子来跟踪自定义几何体的位置和缩放。我们添加了多个滑动条，并通过handlePositionChange和handleScaleChange函数来更新位置和缩放状态。在useEffect钩子中，我们创建了一个名为animateTransitions的函数，用于实现位置和缩放的平滑过渡。通过lerp函数，我们在每一帧更新几何体的位置和缩放，从而实现平滑过渡效果。

通过这种方式，我们可以利用React的状态和生命周期来创建流畅的动画效果，使自定义几何体在动画过程中平滑地改变位置和缩放。

在本章节中，我们学习了如何使用React来控制Three.js动画，并利用React状态和生命周期方法来创建流畅的动画效果。通过这些技术，我们可以实现更加复杂和生动的场景动画。在下一章节中，我们将学习如何优化React+Three.js应用程序，以提高性能和用户体验。敬请期待！