用React-Three-Fiber做酷炫粒子效果

2023-09-16 12:24:43

用React-Three-Fiber做酷炫粒子效果

前言

React-Three-Fiber是一个基于React的Three.js库，它允许我们在React应用程序中轻松创建和渲染三维场景。Three.js是一个流行的JavaScript库，用于创建和渲染三维图形。

步骤一：设置项目

首先，我们需要创建一个新的React项目。我们可以使用create-react-app工具来创建项目。

npx create-react-app my-react-three-fiber-project

步骤二：安装React-Three-Fiber

接下来，我们需要安装React-Three-Fiber库。

npm install react-three-fiber

步骤三：创建一个场景

现在，我们可以创建一个场景来容纳我们的粒子动画。

import * as THREE from 'three';
import { Canvas } from 'react-three-fiber';

const Scene = () => {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <mesh>
        <sphereGeometry args={[1, 32, 32]} />
        <meshStandardMaterial color="blue" />
      </mesh>
    </Canvas>
  );
};

export default Scene;

步骤四：添加粒子动画

现在，我们可以添加粒子动画到场景中。

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

const ParticleAnimation = () => {
  const particles = new THREE.BufferGeometry();
  const positions = new Float32Array(1000 * 3);
  for (let i = 0; i < 1000; i++) {
    positions[i * 3] = (Math.random() - 0.5) * 10;
    positions[i * 3 + 1] = (Math.random() - 0.5) * 10;
    positions[i * 3 + 2] = (Math.random() - 0.5) * 10;
  }
  particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));

  const material = new THREE.PointsMaterial({
    color: 'white',
    size: 0.1,
  });

  const points = new THREE.Points(particles, material);

  useFrame(() => {
    points.rotation.x += 0.01;
    points.rotation.y += 0.01;
  });

  return (
    <group>
      <pointLight position={[10, 10, 10]} />
      {points}
    </group>
  );
};

export default ParticleAnimation;