vanta实现三维动感漩涡动画效果代码-html代码-BFW代码库

vanta实现三维动感漩涡动画效果代码

代码语言：html

所属分类：动画

代码描述：vanta实现三维动感漩涡动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  <title>
      漩涡
  </title>
<style>
body { margin: 0; }
			canvas { width: 100%; height: 100% }
</style>


  
  
</head>

<body >
  <div id="canvas"> 
 </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.100.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vanta.rings.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vanta.net.min.js"></script>

  
      <script >
//漩涡
const effects= VANTA.RINGS({
  el: "#canvas",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 500.00,
  minWidth: 500.00,
  scale: 1,
  scaleMobile:1
});
var len=effects.rings.length;
for(var i=0;i<len;i++){
   effects.rings[i].material.transparent=true;
  effects.rings[i].material.opacity=0.2;
  effects.rings[i].visible=false;
}

for(var j=0;j<20;j++){
  var ran=Math.floor(Math.random() * 30) + 21;
  var ran2=Math.floor(Math.random() * 100) + 21;
  if(j%2==0){
    effects.genRing(0x202428,ran,ran,j,Math.cos(j)+5,10+j,ran2);
  }else{
    effects.genRing(0xfff,ran,ran,j,Math.sin(j)+5,j,ran2);
  }
  
}
var len2=effects.rings.length-20;
var final=effects.rings..........完整代码请登录后点击上方下载按钮下载查看