基于threejs动态主页

Vanta.js官网： Vanta.js Animated website backgrounds in a few lines of code.
Vanta npm 官网：Vanta - npm

安装

npm i three@0.121.0

npm i vanta

使用

import * as THREE from "three";
import Clouds from "vanta/src/vanta.clouds";

<div class="loginContainer vantaRef" ref="vantaRef"></div>

 const vantaRef = ref(null)

 let vantaEffect = null
  vantaEffect = clouds({
        el: vantaRef.value,
        THREE: THREE,
        waveHeight: 20,
        shininess: 50,
        waveSpeed: 1.5,
        zoom: 0.75,
        backgroundColor: 0x000000,
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        scaleMobile: 1.0,
        points: 7.0,
        spacing: 14.0,
      })