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.;
  
  void main(){
  
    vPosition=position;
    
    a=length(position);
    if(t>0.)b=max(0.,(cos(a/20.-t*.02)-.99)*3./a);
    if(z>0.)b=max(0.,cos(a/40.-z*.01+2.));
    mPosition=position*(1.+b*4.);
    vec4 mvPosition=modelViewMatrix*vec4(mPosition,1.);
    gl_Position=mvPosition*projectionMatrix;
    
    gas=max(.0,sin(-a/20.));
    gl_PointSize=pixelRatio*size*(1.+gas*2.)/length(mvPosition.xyz);
  
  }
		</script>
		<script id='fShader' type='x-fragment/x-shader'>
  uniform float z;
      
  varying vec3 vPosition;
  varying vec3 mPosition;
  varying float gas;
      
  void main(){
    
    float a=distance(mPosition,vPosition);
    if(a>0.)a=1.;
    
    float b=max(.32,.0065*length(vPosition));
      
    float c=distance(gl_PointCoord,vec2(.5));
    float starlook=-(c-.5)*1.2*gas; 
    float gaslook=(1.-gas)/(c*10.);
    float texture=starlook+gaslook;
               
    gl_FragColor=vec4(.32,.28,b,1.)*texture*(1.-a*.35);
    if(z>0.)gl_FragColor*=cos(1.57*z/322.)*(1.-.001*length(mPosition));
      
  }
</script>
      


<button  style='position:absolute;width:100%;text-align:center;border-radius:5px;right:10px;font-family:Arial;color:#33c;outline:none;background:none;border:none;text-decoration:underline;font-size:16px;cursor:pointer;'></button>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.75.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script >
    THREE.TrackballControls = function ( object, domElement ) {

	var _this = this;
	var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };

	this.object = object;
	this.domElement = ( domElement !== undefined ) ? domElement : document;

	// API

	this.enabled = true;

	this.screen = { left: 0, top: 0, width: 0, height: 0 };

	this.rotateSpeed = 1.0;
	this.zoomSpeed = 1.2;
	this.panSpeed = 0.3;

	this.noRotate = false;
	this.noZoom = false;
	this.noPan = false;

	this.staticMoving = false;
	this.dynamicDampingFactor = 0.2;

	this.minDistance = 0;
	this.maxDistance = Infinity;

	this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];

	// internals

	this.target = new THREE.Vector3();

	var EPS = 0.000001;

	var lastPosition = new THREE.Vector3();

	var _state = STATE.NONE,
	_prevState = STATE.NONE,

	_eye = new THREE.Vector3(),

	_movePrev = new THREE.Vector2(),
	_moveCurr = new THREE.Vector2(),

	_lastAxis = new THREE.Vector3(),
	_lastAngle = 0,

	_zoomStart = new THREE.Vector2(),
	_zoomEnd = new THREE.Vector2(),

	_touchZoomDistanceStart = 0,
	_touchZoomDistanceEnd = 0,

	_panStart = new THREE.Vector2(),
	_panEnd = new THREE.Vector2();

	// for reset

	this.target0 = this.target.clone();
	this.position0 = this.object.position.clone();
	this.up0 = this.object.up.clone();

	// events

	var changeEvent = { type: 'change' };
	var startEvent = { type: 'start' };
	var endEvent = { type: 'end' };


	// methods

	this.handleResize = function () {

		if ( this.domElement === document ) {

			this.screen.left = 0;
			this.screen.top = 0;
			this.screen.width = window.innerWidth;
			this.screen.height = window.innerHeight;

		} else {

			var box = this.domElement.getBoundingClientRect();
			// adjustments come from similar code in the jquery offset() function
			var d = this.domElement.ownerDocument.documentElement;
			this.screen.left = box.left + window.pageXOffset - d.clientLeft;
			this.screen.top = box.top + window.pageYOffset - d.clientTop;
			this.screen.width = box.width;
			this.screen.height = box.height;

		}

	};

	this.handleEvent = function ( event ) {

		if ( typeof this[ event.type ] == 'function' ) {

			this[ event.type ]( event );

		}

	};

	var getMouseOnScreen = ( function () {

		var vector = new THREE.Vector2();

		return function getMouseOnScreen( pageX, pageY ) {

			vector.set(
				( pageX - _this.screen.left ) / _this.screen.width,
				( pageY - _this.screen.top ) / _this.screen.height
			);

			return vector;

		};

	}() );

	var getMouseOnCircle = ( function () {

		var vector = new THREE.Vector2();

		return function getMouseOnCircle( pageX, pageY ) {

			vector.set(
				( ( pageX - _this.screen.width * 0.5 - _this.screen.left ) / ( _this.screen.width * 0.5 ) ),
				( ( _this.screen.height + 2 * ( _this.screen.top - pageY ) ) / _this.screen.width ) // screen.width intentional
			);

			return vector;

		};

	}() );

	this.rotateCamera = ( function() {

		var axis = new THREE.Vector3(),
			quaternion = new THREE.Quaternion(),
			eyeDirection = new THREE.Vector3(),
			objectUpDirection = new THREE.Vector3(),
			objectSidewaysDirection = new THREE.Vector3(),
			moveDirection = new THREE.Vector3(),
			angle;

		return function rotateCamera() {

			moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 );
			angle = moveDirection.length();

			if ( angle ) {

				_eye.copy( _this.object.position ).sub( _this.target );

				eyeDirection.copy( _eye ).normalize();
				objectUpDirection.copy( _this.object.up ).normalize();
				objectSidewaysDirection.crossVectors( objectUpDirection, eyeDirection ).normalize();

				objectUpDirection.setLength( _moveCurr.y - _movePrev.y );
				objectSidewaysDirection.setLength( _moveCurr.x - _movePrev.x );

				moveDirection.copy( objectUpDirection.add( objectSidewaysDirection ) );

				axis.crossVectors( moveDirection, _eye ).normalize();

				angle *= _this.rotateSpeed;
				quaternion.setFromAxisAngle( axis, angle );

				_eye.applyQuaternion( quaternion );
				_this.object.up.applyQuaternion( quaternion );

				_lastAxis.copy( axis );
				_lastAngle = angle;

			} else if ( ! _this.staticMoving && _lastAngle ) {

				_lastAngle *= Math.sqrt( 1.0 - _this.dynamicDampingFactor );
				_eye.copy( _this.object.position ).sub( _this.target );
				quaternion.setFromAxisAngle( _lastAxis, _lastAngle );
				_eye.applyQuaternion( q.........完整代码请登录后点击上方下载按钮下载查看