虚线圆

示例

HTML

<script type="x-shader/x-vertex" id="vertexshader">
	  attribute float lineDistance;
	  varying float vLineDistance;


	  void main() {
		vLineDistance = lineDistance;
		vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
		gl_Position = projectionMatrix * mvPosition;
	  }
	</script>
	<script type="x-shader/x-fragment" id="fragmentshader">
	  uniform vec3 diffuse;
	  uniform float opacity;
	  uniform float time; // added time uniform


	  uniform float dashSize;
	  uniform float gapSize;
	  uniform float dotSize;
	  varying float vLineDistance;


	  void main() {
			float totalSize = dashSize + gapSize;
			float modulo = mod( vLineDistance + time, totalSize ); // time added to vLineDistance
		float dotDistance = dashSize + (gapSize * .5) - (dotSize * .5);


		if ( modulo > dashSize && mod(modulo, dotDistance) > dotSize ) {
		  discard;
		}


		gl_FragColor = vec4( diffuse, opacity );
	  }
	</script>

CSS

body {
  margin: 0;
  padding: 0;
}

JS

"use strict";

var renderer, scene, camera, displacementSpriteForLine;

var lineGroup = [], 
    lineWidth = 125,
    lineMat;
var clock = new THREE.Clock();

var vertex       = document.getElementById( 'vertexshader' ).textContent,
	fragment     = document.getElementById( 'fragmentshader' ).textContent;


init();
render();


function init() {

	// renderer
	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);


	// scene
	scene = new THREE.Scene();


	// camera
	camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
	camera.position.set(0, 0, 500);


	
	// line material
	lineMat = new THREE.ShaderMaterial({
		uniforms: {
			diffuse: {value: new THREE.Color("pink")},
			dashSize: {value: 1},
			gapSize: {value: 1},
			dotSize: {value: 0.15},
			opacity: {value: 1},
			time: {value: 0} // added uniform
		},
		vertexShader: vertex,
		fragmentShader: fragment,
		transparent: true
	});
	
	
    // vertices
	var dashMaterial = new THREE.LineDashedMaterial({
		color: 0xBA55D3,
		dashSize: 2 * Math.PI * 10 / 40,
		gapSize: 2 * Math.PI * 10 / 40,
		linewidth: 4
	});
	var circGeom = new THREE.CircleGeometry( 10, 50 );
	circGeom.vertices.shift();
	
  //
  for (var i = 0; i < lineWidth; i++) {
    var displacementSpriteForLine = new THREE.LineSegments( circGeom, lineMat );
    displacementSpriteForLine.computeLineDistances();
    displacementSpriteForLine.position.set(0, 0, 0);
    displacementSpriteForLine.rotation.x = 2;
    displacementSpriteForLine.scale.setScalar( 15 - i/199 );


    // set the original position
    displacementSpriteForLine.origPos	= {
      x: displacementSpriteForLine.position.x,
      y: displacementSpriteForLine.position.y,
      z: displacementSpriteForLine.position.z
    };


    lineGroup.push( displacementSpriteForLine );


    scene.add( displacementSpriteForLine );


  }
	
	
	var tl = new TimelineMax( {repeat: -1 } );
	tl.to( lineMat.uniforms.opacity, 1.5, {
		value: 0.7, 
		repeatDelay: 0, 
		repeat: -1,
		yoyo: true
	});
	tl.play();


	
	// Fires when the window changes
	window.addEventListener( 'resize', onWindowResize, false );




}


function render() {
	requestAnimationFrame( render );


	var delta   = clock.getDelta(),
		elapsed = clock.getElapsedTime()
	
	lineMat.uniforms.time.value += delta * 1.5;
  // Update line
  for (var i = 0; i < lineWidth; i++) {
    lineGroup[i].rotation.x += 0.01;
  }


  
  
	renderer.render( scene, camera );


}


function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );
}