three实现铁球滚动平面凹陷动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现铁球滚动平面凹陷动画效果代码,可设置参数。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } * { box-sizing: border-box; } body { background-color: #0dea8d; font-family: sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } canvas { width: 100%; height: 100%; } .stats { opacity: 1; z-index: 10; position: absolute; } .dg.ac { position: absolute; z-index: 10 !important; } </style> <link href="https://fonts.googleapis.com/css?family=Ropa+Sans&display=swap" rel="stylesheet"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> </head> <body> <main> <div class="stats"></div> </main> <script> const radians = degrees => { return degrees * Math.PI / 180; }; const distance = (x1, y1, x2, y2) => { return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)); }; const map = (value, istart, istop, ostart, ostop) => .........完整代码请登录后点击上方下载按钮下载查看
网友评论0