three实现三维多彩管子扭动动画效果代码
代码语言:html
所属分类:动画
代码描述:three实现三维多彩管子扭动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat'> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; color: #fff; font-family: 'Montserrat', sans-serif; text-shadow: 1px 1px 1px #000; } canvas { position: fixed; z-index: -1; width: 100%; height: 100%; } header { position: absolute; width: 100%; text-align: center; } header h1 { font-size: 2rem; margin: 0.5em 0 0.2em; } a { font-size: 0.9rem; color: #bbb; text-decoration: none; border-bottom: 0.15rem solid transparent; transition: all 0.4s; } a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.7); } </style> </head> <body> <header> <h1>Strange Tubes #2</h1> <a href="" target="_blank">ThreeJS Collection</a> </header> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.108.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chroma.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script> <script > const simplex = new SimplexNoise(); function App(conf) { conf = { fov: 75, cameraZ: 150, background: 0x000000, tubeRadius: 3, resY: 10, resX: 4, noiseCoef: 50, timeCoef: 50, mouseCoef: 50, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0