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,
})