three实现三维宇宙星云星河星系旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维宇宙星云星河星系旋转动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
	<meta charset="UTF-8">
<style>
     
body{
  margin:0;
  background-color:#000;
}
canvas{
  cursor:grab;
  cursor:-webkit-grab;
  cursor:-moz-grab;
}
canvas:active{
  cursor:grabbing;
  cursor:-webkit-grabbing;
  cursor:-moz-grabbing;
}
a.twitter, a.more{
  position:absolute;
  bottom:40px;
  right:10px;
  font-family:Arial;
  color:#33c;
  margin-right:-500px;
  transition:margin-right 500ms ease;
}
p{
  margin:3px;
  position:relative;
  font:normal 15px Arial;
}
p.shadow{
  text-shadow:1px 1px 2px #000 ;
}
div.layout{
  top:-250px;
  width:100%;
  position:absolute;
  transition:top 500ms ease;
}
#instruction{
  z-index:1;
  color:#f90;
  font-family:Arial;
  padding:9px 0 5px 0;
  background-color:darkslategrey;
  top:100%;
  width:50%;
  position:absolute;
  left:25%;
  opacity:.8;
  border-radius:0px 0px 100px 100px;
  text-align:center;
  transition:all 500ms ease;
}
#good-person{
  cursor:pointer;
  color:#f90;
  font-family:Arial;
  padding:9px 0 5px 0;
  background-color:darkslategrey;
  bottom:-50px;
  box-shadow:0px -2px 4px black inset;
  width:50%;
  position:absolute;
  left:25%;
  opacity:.8;
  border-radius:100px 100px 0px 0px ;
  text-align:center;
  transition:all 500ms ease;
}
#info{
  border:solid 4px #444;
  border-top:none;
  border-radius:0px 0px 10px 10px;
  z-index:2;
  box-shadow:0px 5px 5px black ;
  color:#aaa;
  font-family:Arial;
  position:relative;
  text-align:center;
  padding:1px;
  top:0px;
  width:50%;
  min-width:500px;
  margin:auto;
  background:linear-gradient(-78deg ,#222 23%, #446 39%, #222 45%,#222 52%, #334 55%, #222 57%);
}
span.black{
  width:3%;
  height:7%;
  background:black;
  position:absolute;
  left:-1%;
  box-shadow:-2px 0px 5px #222 inset;
}
span.right{
  position:absolute;
  left:98%;
  box-shadow:2px 0px 5px #222 inset;
}
span.one{top:10%}
span.two{top:19%}
span.three{top:28%}
span.four{top:37%}
p.positionning{
  width:50%;
  background:#000;
  height:2px;
  text-align:left;
  margin:10px auto;
}
#timeline{
  height:2px;
  width:0%;
  position:absolute;
  top:0%;
}
.scanning{
  background:#f90;
  /*animation:scan 8s linear;*/ /* way faster on mobile without that*/
}
@keyframes scan{
  0%{
    width:0%;
    box-shadow:0px 0px 20px 5px #f90;
  }
  100%{
    width:100%;
    box-shadow:0px 0px 20px 5px #f90;
  }
}
.waiting{
  background:#3c4;
  /*animation:wait 4s infinite;*/ /*same*/
}
@keyframes wait{
  0%{
    width:100%;
    box-shadow:0px 0px 20px 3px #3c4;
  }
  50%{
    width:100%;
    box-shadow:0px 0px 0px 0px #3c4;
  }
  100%{
    width:100%;
    box-shadow:0px 0px 20px 3px #3c4;
  }
}
.warning{
  background:#f50;
  animation:warn 1s infinite;
}
@keyframes warn{
  0%{
    width:100%;
    box-shadow:0px 0px 0px 0px #f50;
  }
  50%{
    width:100%;
    box-shadow:0px 0px 20px 3px #f50;
  }
  100%{
    width:100%;
    box-shadow:0px 0px 0px 0px #f50;
  }
}
span.eye{
  width:40px;
  height:40px;
  background:-webkit-radial-gradient(orange 0% , red 20%,  black 60%, #555 61%);
  background:-moz-radial-gradient(orange 0% , red 20%,  black 60%, #555 61%);
  background:-ms-radial-gradient(orange 0% , red 20%,  black 60%, #555 61%);
  background:-o-radial-gradient(orange 0% , red 20%,  black 60%, #555 61%);
  border-radius:50%;
  position:absolute;
  left:47px;
  top:7px;
}
span.metal{
  font:bold 10px Arial;
  width:40px;
  height:40px;
  background:-webkit-radial-gradient(#777 15%,#888 35%, #666 50%,#888 55%,#555 65%);
  background:-moz-radial-gradient(#666 0% , #777 15%,#888 35%, #666 50%,#888 55%,#555 65%);
  background:-ms-radial-gradient(#666 0% , #777 15%,#888 35%, #666 50%,#888 55%,#555 65%);
  background:-o-radial-gradient(#666 0% , #777 15%,#888 35%, #666 50%,#888 55%,#555 65%);
  border-radius:50%;
  box-shadow:0px 0px 15px 3px black;
  position:absolute;
  right:47px;
  top:7px;
  color:#222;
}
.clic{
  animation:clic .2s linear 2 alternate;
}
@keyframes clic{
  0%{box-shadow:0px 0px 15px 3px black}
  100%{box-shadow:0px 0px 15px 3px green}
}
span.metal:after{
  position:relative;
  content:'ABORT';
  text-align:center;
  width:100%;
  top:14px
}
.abort{
  animation:aborting .4s linear infinite alternate;
}
@keyframes aborting{
  0%{color:#222;}
  100%{color:red;}
}
#log{
  font:normal 15px Courier;
  border-radius:10px;
  height:36px;
  padding:3px 15px;
  background:black;
}
#howmuch {
  top:20%;
  height:71%;
  width:58px;
  position:absolute;
  text-align:center;
  border:solid 4px #444;
  border-left:none;
  border-radius:0px 10px 10px 0px;
  background:#222;
  padding:2px;
  left:-100px;
  transition:left 500ms ease;
}
#good{
  top:15%;
  color:#590;  
  font:bold 15px Arial;
  left:1px;
}
#bad{
  font:bold 15px Arial;
  color:#a11;
  position:absolute;
  bottom:22%;
  left:4px;
}
#gauge {
  position:absolute;
  top:50%;
  left:11px;
  border-top: 4px solid transparent;  
	border-bottom: 4px solid transparent; 
	border-left: 19px solid #444;
	border-right: 19px solid #444;
  width:2px;
  transition:top 2s ease;
}
#bg{
  width:40px;
  height:40%;
  background:black;
  position:absolute;
  top:30%;
  left:11px;
}
p.counter-title{
  color:#aaa;
  font:normal 10px Arial; 
}
#destroyed{
  position:absolute;
  bottom:0;
  left:-2px;
}
p.counter{
  width:40px;
  height:40px;
  left:7px;
  border-radius:50%;
  border:solid 1px #555;
  position:absolute;
  font:bold 37px Arial;
  color:#aaa;
  background:#222;
}
#destroyedresult{
  bottom:30px;
}
p.change{
  animation:changing 2s linear;
}
@keyframes changing{
  0%{
    background:#ccc;
  }
  100%{
    background:#222;
  }
}
</style>
</head>
 <body>
  
<script id='vShader' type='x-vertex/x-shader'>
	uniform float size;
  uniform float t;
  uniform float z;
  uniform float pixelRatio;
  
  varying vec3 vPosition;
  varying vec3 mPosition;//modified position
  varying float gas;
  
  float a,b=0.;
.........完整代码请登录后点击上方下载按钮下载查看