如何在ReactJS项目中实现背景图移动亮点动画？

步骤1：安装依赖 #

首先在你的React项目中安装所需库：

npm install three @react-three/fiber @react-three/drei

步骤2：创建背景动画组件 #

下面是完整的可复用组件代码，实现随机移动的发光亮点效果：

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

// 单个移动亮点组件
const GlowPoint = () => {
  const meshRef = useRef();
  // 初始化随机位置（基于Canvas坐标系）
  const [position] = useState(() =>
    new THREE.Vector3(
      (Math.random() - 0.5) * 10,
      (Math.random() - 0.5) * 10,
      Math.random() * 2 - 1
    )
  );
  // 初始化随机移动速度
  const [velocity] = useState(() =>
    new THREE.Vector3(
      (Math.random() - 0.5) * 0.02,
      (Math.random() - 0.5) * 0.02,
      (Math.random() - 0.5) * 0.01
    )
  );
  // 随机大小和初始透明度
  const [size] = useState(Math.random() * 0.5 + 0.2);
  const [baseOpacity] = useState(Math.random() * 0.5 + 0.3);

  // 每一帧更新动画状态
  useFrame(() => {
    // 更新亮点位置
    position.add(velocity);

    // 边界碰撞检测，超出画布范围后反向移动
    if (Math.abs(position.x) > 5) velocity.x *= -1;
    if (Math.abs(position.y) > 5) velocity.y *= -1;
    if (Math.abs(position.z) > 1) velocity.z *= -1;

    meshRef.current.position.copy(position);
    // 添加呼吸式透明度波动
    meshRef.current.material.opacity = baseOpacity + Math.sin(Date.now() * 0.001) * 0.1;
  });

  return (
    <mesh ref={meshRef}>
      <circleGeometry args={[size, 16]} />
      <meshBasicMaterial
        color="#00e0ff"
        transparent
        opacity={baseOpacity}
        blending={THREE.AdditiveBlending} // 叠加模式实现发光效果
      />
    </mesh>
  );
};

// 全屏背景动画容器
export const BackgroundGlow = () => {
  return (
    <div style={{ 
      position: 'fixed', 
      top: 0, 
      left: 0, 
      width: '100vw', 
      height: '100vh', 
      zIndex: -1,
      overflow: 'hidden'
    }}>
      <Canvas camera={{ position: [0, 0, 10], fov: 75 }}>
        {/* 深色背景平面 */}
        <mesh position={[0, 0, -2]}>
          <planeGeometry args={[20, 20]} />
          <meshBasicMaterial color="#0a0e27" />
        </mesh>
        {/* 生成30个随机亮点 */}
        {Array.from({ length: 30 }).map((_, idx) => (
          <GlowPoint key={idx} />
        ))}
      </Canvas>
    </div>
  );
};

步骤3：在项目中使用组件 #

在你的主页面组件（比如App.js）中引入并使用：

import { BackgroundGlow } from './BackgroundGlow';

function App() {
  return (
    <div className="App">
      {/* 背景动画放在最底层 */}
      <BackgroundGlow />
      {/* 你的页面内容，设置z-index确保在背景上方 */}
      <div style={{ 
        position: 'relative', 
        zIndex: 1, 
        padding: '2rem', 
        color: '#fff',
        minHeight: '100vh'
      }}>
        <h1>我的React项目</h1>
        <p>这是叠加在动态背景上的内容</p>
      </div>
    </div>
  );
}

export default App;

关键细节说明 #

• AdditiveBlending：启用叠加混合模式，让多个亮点的颜色叠加，模拟发光效果，和目标网站的视觉表现一致。
• useFrame钩子：react-three/fiber提供的帧循环钩子，替代传统Three.js的requestAnimationFrame，简化动画状态更新。
• 随机化参数：每个亮点的位置、速度、大小、透明度都随机生成，让动画更自然无序。
• 边界碰撞：当亮点移动到画布边缘时反向速度，避免亮点移出可视区域。

优化方向 #

• 调整color属性值匹配目标网站的色调。
• 增加亮点的旋转动画，或者修改几何形状为矩形/椭圆。
• 使用ShaderMaterial实现更复杂的光晕效果（比如高斯模糊）。
• 调整亮点数量（length: 30）和移动速度（0.02），匹配目标网站的动画节奏。

内容的提问来源于stack exchange，提问作者Báu Trần Văn