Threejs粒子水波纹效果

依赖

• three（这个重要）
• react （这个不重要）
• ahooks（这个不重要）
• unocss（这个不重要）

效果

代码

import React, {
    useEffect, useRef } from 'react';
import {
    useGetState } from 'ahooks';
import * as THREE from 'three';

const Index= () => {
   
  const threeRef = useRef(null);
  const [, setCamera, getCamera] = useGetState(null);
  const [, setRenderer, getRenderer] = useGetState(null);
  const [, setScene, getScene] = useGetState(null);
  const [, setParticles, getParticles] = useGetState(null);
  const [, setCount, getCount] = useGetState(0);

  const SEPARATION = 100,
    AMOUNT_X = 200,
    AMOUNT_Y = 200;

  const init = () => {
   
    const newCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);

    newCamera.position.z = 1000;

    const newScene = new THREE.Scene();

    setScene(newScene);