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