如何在React three-fiber中实现3D模型的摇摆动画？

以下是两种无需在Blender制作动画的实现方案，均可实现围绕X、Z轴的自然摇摆效果：

方案1：用GSAP实现循环摇摆动画 #

利用你已在使用的GSAP，结合模型的ref创建往复旋转动画：

import { useEffect, useRef } from 'react';
import gsap from 'gsap';

// 你的模型组件内部
const slideRef = useRef(null);

useEffect(() => {
  if (!slideRef.current) return;

  // 围绕X、Z轴做小角度往复摇摆
  gsap.to(slideRef.current.rotation, {
    x: Math.PI / 2 + 0.1, // 在初始X旋转基础上±0.1弧度摇摆
    z: 0.1,
    duration: 2,
    yoyo: true, // 开启往复运动
    repeat: -1, // 无限循环
    ease: "sine.inOut" // 平滑缓动，模拟自然摇摆
  });
}, []);

• 调整0.1可以改变摇摆幅度，数值越小动作越平缓；修改duration可控制摇摆速度。

方案2：用React Three Fiber原生帧动画实现 #

如果不想依赖GSAP，用Three Fiber的useFrame钩子结合三角函数实现：

import { useFrame } from '@react-three/fiber';
import { useRef } from 'react';

// 你的模型组件内部
const slideRef = useRef(null);

useFrame((state) => {
  if (!slideRef.current) return;
  const elapsedTime = state.clock.getElapsedTime();
  
  // X轴摇摆：初始角度 + 正弦值控制的摆动
  slideRef.current.rotation.x = Math.PI / 2 + Math.sin(elapsedTime * 0.5) * 0.1;
  // Z轴摇摆：用余弦值实现和X轴交错的摆动效果
  slideRef.current.rotation.z = Math.cos(elapsedTime * 0.7) * 0.08;
});

• 0.5/0.7是动画速度系数，数值越小摇摆越慢；0.1/0.08是幅度，按需调整。

扩展：交互增强（可选） #

如果需要在鼠标悬停时改变摇摆效果，结合你已有的onHover/onHoverOut函数：

import { useState } from 'react';

const [isHovered, setIsHovered] = useState(false);
const onHover = () => setIsHovered(true);
const onHoverOut = () => setIsHovered(false);

// 在GSAP方案中，可通过修改动画参数实现：
useEffect(() => {
  const tl = gsap.to(slideRef.current.rotation, {
    x: Math.PI / 2 + 0.1,
    z: 0.1,
    duration: 2,
    yoyo: true,
    repeat: -1,
    ease: "sine.inOut"
  });
  
  return () => tl.kill();
}, []);

// hover时更新动画目标值
useEffect(() => {
  if (!slideRef.current) return;
  gsap.to(slideRef.current.rotation, {
    x: Math.PI / 2 + (isHovered ? 0.2 : 0.1),
    z: isHovered ? 0.2 : 0.1,
    duration: 0.5,
    ease: "sine.inOut"
  });
}, [isHovered]);

内容的提问来源于stack exchange，提问作者mrconcerned