vanta
只需几行代码,即可将 3D 动画数字艺术添加到任何网页。
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta/dist/vanta.waves.min.js"></script>
<script>
VANTA.WAVES('#my-background')
</script>
VANTA.WAVES({
el: '#my-background', // element selector string or DOM object reference
color: 0x000000,
waveHeight: 20,
shininess: 50,
waveSpeed: 1.5,
zoom: 0.75
})
const effect = VANTA.WAVES({
el: '#my-background',
color: 0x000000
})
// Later, when you want to update an animation in progress with new options
effect.setOptions({
color: 0xff88cc
})
// Later, if the container changes size and you want to force Vanta to redraw at the new canvas size
effect.resize()
const effect = VANTA.WAVES('#my-background')
effect.destroy() // e.g. call this in React's componentWillUnmount
npm i vanta
,然后导入具体效果如下。确保 three.js
或 p5.js
已经通过