79

0

vanta

只需几行代码,即可将 3D 动画数字艺术添加到任何网页。

# Vanta JS

在 www.vantajs.com 查看演示库和自定义效果 →

替代文字

什么是Vanta?/ 常见问题

  • 只需几行代码,即可将 3D 动画数字艺术添加到任何网页。
  • 工作原理:Vanta 将动画效果作为背景插入到任何 HTML 元素中。
  • 适用于 vanilla JS、React、Angular、Vue 等。
  • 效果由three.js(使用 WebGL)或p5.js 渲染
  • 效果可以与鼠标/触摸输入交互。
  • 效果参数(例如颜色)可以轻松修改以匹配您的品牌。
  • 总额外文件大小约为 120kb 压缩和 gzip 压缩(主要是三个.js),小于可比较的背景图像/视频。
  • Vanta 包含许多可供试用的预定义效果。更多效果将很快添加!

在 www.vantajs.com 查看演示库和自定义效果 →

脚本标签的基本用法:

<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
})
  • el: 容器元素。
    • Vanta 画布将作为该元素的子元素附加,并将采用该元素的宽度和高度。(如果您想要全屏画布,请确保此容器元素是全屏的。)
    • 这个容器可以有其他的孩子。其他子项将作为前景内容出现在 Vanta 画布前面。
  • mouseControls:( 默认为 true )设置为 false 以禁用鼠标控制。仅适用于某些效果。
  • touchControls:( 默认为 true )设置为 false 以禁用触摸控制。仅适用于某些效果。
  • gyroControls:( 默认为 false )设置为 true 以允许陀螺仪模仿鼠标。仅适用于某些效果。
  • 注意: 每个效果都有自己的特定参数。在www.vantajs.com上探索它们!

初始化后更新选项:

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

与 React Hooks 一起使用:

npm i vanta,然后导入具体效果如下。确保 three.jsp5.js已经通过