使用Threejs制作3D螺旋线

做了一个3D螺旋线的生成器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Threejs制作3D螺旋线</title>
<style>
*{padding:0;margin:0;}
body{background:#333;color:#fff;}
.controlBar{position:absolute;}
#control ul{width:150px;float:left;list-style:none;}
#control b{position:relative;display:inline-block;width:120px;height:5px;font-size:0;line-height:0;background:#fff;border:1px solid #aaa;border-radius:2px;}
#control i{position:absolute;cursor:pointer;top:-4px;left:50%;width:10px;height:10px;margin-left:-4px;border:1px solid #d3d3d3;background:#ececec;border-radius:2px;}
#control i:hover{border:1px solid #999;background:#dcdcdc;}
</style>
<script src="/public/js/extend.js"></script>
<script src="/public/js/three.min.js"></script>
</head>
<body>
<div class="controlBar">
<div id="control">
	<ul>
		<li>x:  <b class='range'><i data-value='85.2'>&nbsp;</i></b></li>
		<li>y:  <b class='range'><i data-value='205.2'>&nbsp;</i></b></li>
		<li>z:  <b class='range'><i data-value='-64.8'>&nbsp;</i></b></li>
	</ul>
	<ul>
		<li>x:  <b class='range'><i data-value='60'>&nbsp;</i></b></li>
		<li>y:  <b class='range'><i data-value='-49.8'>&nbsp;</i></b></li>
		<li>z:  <b class='range'><i data-value='184.8'>&nbsp;</i></b></li>
	</ul>
	<ul>
		<li>x:  <b class='range'><i data-value='225'>&nbsp;</i></b></li>
		<li>y:  <b class='range'><i data-value='-195'>&nbsp;</i></b></li>
		<li>z:  <b class='range'><i data-value='195'>&nbsp;</i></b></li>
	</ul>
</div>
<button onclick="Producer.createPoints()">增加操作点</button>
</div>
<script>
var controlElm = $id("control"),
	iElm = $tag("i", controlElm);
for(var i = 0; i < iElm.length; i++){
	iElm[i].style.left = (iElm[i].dataset['value'] - 0 + 300) * 100 /600 + "%";
}
var Producer = {
	points : [],
	getPoints : function(){
		Producer.points = [];
		var UL = $tag("UL", controlElm), item, jsondata;
		for(var i = 0 ; i <UL.length; i++){
			item =  $tag("i",UL[i]);
			jsondata = {
				x : item[0].dataset['value']-0,
				y : item[1].dataset['value']-0,
				z : item[2].dataset['value']-0,
			}
			Producer.points.push(jsondata);
		}
	},
	createPoints : function(){
		$id("control").insertAdjacentHTML('beforeEnd',$tag("UL",$id("control"))[0].outerHTML);
	},
	changePoints : function(o,e){
		var l = 600;
		if(!window.event) {e.preventDefault();}
		var tX = o.offsetLeft,
			dx = e.clientX;
		events.addEvent(document,'mousemove',mouseMove);
		events.addEvent(document,'mouseup',mouseUp);
		function mouseMove(){
			var e = arguments[0] || window.event;
			var len = tX + e.clientX - dx + 8, val;
			if(len >=0 && len <= 120){
				var rat = (len / 120) * 100;
				o.style.left = rat+ "%";
				val = l * Math.round((rat - 50)*10)/1000;
				o.dataset['value'] = val;
				o.title = val;
			}
			if(window.event) e.returnValue=false;
		}
		function mouseUp(){
			events.removeEvent(document,'mousemove',mouseMove);
			events.removeEvent(document,'mouseup',mouseUp);
			spiralDemo.init().animate();
		}
	}
};
function Spiral3D(){
	this.width = Math.max(1000, document.documentElement.offsetWidth);
	this.height = 800;
	this.camera = new THREE.PerspectiveCamera( 33, this.width / this.height, 1, 10000);
	this.scene = new THREE.Scene();
	this.renderer = null;
	this.create();
}
Spiral3D.prototype = {
	create : function(){
		try{
			this.renderer = new THREE.WebGLRenderer( { antialias: true } ); //webgl
		}catch(e){
			this.renderer = new THREE.CanvasRenderer(); //canvas
		}
		this.renderer.setSize( this.width, this.height);
		document.body.appendChild( this.renderer.domElement );
		this.init();
		return this;
	},
	init : function() {
		this.scene = new THREE.Scene();
		this.stop();
		Producer.getPoints();
		var spline = new THREE.Spline( Producer.points ),  //以关键点创建曲线
			geometry = new THREE.Geometry(),
			material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 1, vertexColors: THREE.VertexColors } );
		//自动补全曲线点
		for ( var i =0, position, l = Producer.points.length * 7; i < l; i ++ ) {
			position = spline.getPoint( i/l );
			geometry.vertices[ i ] = new THREE.Vector3( position.x, position.y, position.z );
			geometry.colors[ i ] = new THREE.Color( 0x00ffff );
			geometry.colors[ i ].setHSV( ( 100 + position.x ) / 400 * i/8, ( 200 + position.x ) / 400, ( 250 + position.x ) / 300);
		}
		//创建100条线
		for(var line, i=0, l = 100 ; i<l; i++){
			line = new THREE.Line(geometry,  material);
			line.position = {x: 0, y: 0, z: 0};
			if(i > 0) {
				line.rotation.y = Math.PI * 2 * (i/l);
			}
			this.scene.add( line ); //将显示对象加入场景
		}
		return this;
	},
	render : function() {
		var timer = Date.now() * 0.0005;
		this.camera.position.x = Math.cos( timer ) * 500;
		this.camera.position.z = Math.sin( timer ) * 500;
		this.camera.lookAt( this.scene.position );
		this.renderer.render( this.scene, this.camera ); //使用渲染器
		return this;
	},
	_reqID : {},
	animate : function() {
		var that = this;
		var _loop = function(){
			that._reqID = requestAnimationFrame( _loop );
			that.render();
		}
		_loop();
		return this;
	},
	stop : function(){
		var that = this;
		cancelAnimationFrame(that._reqID);
	}
}
var spiralDemo = new Spiral3D();
	spiralDemo.animate();
events.delegate(controlElm, 'i', 'mousedown',function(){
	var e = arguments[0] || window.event,
		target = e.srcElement || e.target;
	Producer.changePoints(target,e);
});
</script>
</body>
</html>

配套做一个动画效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Threejs 3D lines</title>
<style>
*{padding:0;margin:0;}
body{background:#333;color:#fff;overflow:hidden;}
</style>
<script src="/public/js/extend.js"></script>
<script src="/blog/resource/threejs/three.min.js"></script>
</head>
<body>
<script>
var Producer = {
	points : [{
		x : 85.2,
		y : 205.2,
		z : -64.8,
		a : 1,
		b : 1,
		c : 1
	},{
		x : 60,
		y : -49.8,
		z : 184.8,
		a : 1,
		b : 1,
		c : 2
	},{
		x : 225,
		y : -195,
		z : 195,
		a : 1,
		b : 2,
		c : 1
	},{
		x : 40,
		y : -40.8,
		z : 114.8,
		a : 2,
		b : 1,
		c : 1
	},{
		x : 85.2,
		y : 105.2,
		z : -24.8,
		a : 2,
		b : 1,
		c : 1
	},{
		x : 85.2,
		y : 205.2,
		z : -64.8,
		a : 1,
		b : 1,
		c : 1
	}],
	changePoints : function(){
		var points = Producer.points;
		for(var i = 0 ; i < points.length; i++){
			item =  points[i];
			if(item.x < -250 || item.x > 250) item.a = -item.a;
			if(item.y < -250 || item.y > 250) item.b = -item.b;
			if(item.z < -250 || item.z > 250) item.c = -item.c;
			item.x -= item.a,
			item.y -= item.b,
			item.z -= item.c
		}
		spiralDemo.init().animate();
	}
};
function Spiral3D(){
	this.width = document.documentElement.offsetWidth;
	this.height = Math.max(document.documentElement.clientHeight,document.body.offsetHeight);
	this.camera = new THREE.PerspectiveCamera( 33, this.width / this.height, 1, 10000);
	this.scene = new THREE.Scene();
	this.renderer = null;
	this.create();
}
Spiral3D.prototype = {
	create : function(){
		try{
			this.renderer = new THREE.WebGLRenderer( { antialias: true } ); //webgl
		}catch(e){
			this.renderer = new THREE.CanvasRenderer(); //canvas
		}
		this.renderer.setSize( this.width, this.height);
		document.body.appendChild( this.renderer.domElement );
		this.init();
		return this;
	},
	init : function() {
		this.scene = new THREE.Scene();
		this.stop();
		var spline = new THREE.Spline( Producer.points ),  //以关键点创建曲线
			geometry = new THREE.Geometry(),
			material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 1, vertexColors: THREE.VertexColors } );
		//自动补全曲线点
		for ( var i =0, position, l = Producer.points.length * 7; i < l; i ++ ) {
			position = spline.getPoint( i/l );
			geometry.vertices[ i ] = new THREE.Vector3( position.x, position.y, position.z );
			geometry.colors[ i ] = new THREE.Color( 0x00ffff );
			geometry.colors[ i ].setHSV( ( 100 + position.x ) / 400 * i/8, ( 200 + position.x ) / 400, ( 250 + position.x ) / 300);
		}
		//创建100条线
		for(var line, i=0, l = 100 ; i<l; i++){
			line = new THREE.Line(geometry,  material);
			line.position = {x: 0, y: 0, z: 0};
			if(i > 0) {
				line.rotation.y = Math.PI * 2 * (i/l);
			}
			this.scene.add( line ); //将显示对象加入场景
		}
		return this;
	},
	render : function() {
		var timer = Date.now() * 0.0005;
		this.camera.position.x = Math.cos( timer ) * 500;
		this.camera.position.z = Math.sin( timer ) * 500;
		this.camera.lookAt( this.scene.position );
		this.renderer.render( this.scene, this.camera ); //使用渲染器
		return this;
	},
	_reqID : {},
	animate : function() {
		var that = this;
		var _loop = function(){
			that._reqID = requestAnimationFrame( _loop );
			that.render();
		}
		_loop();
		return this;
	},
	stop : function(){
		var that = this;
		cancelAnimationFrame(that._reqID);
	}
};
var spiralDemo = new Spiral3D();
	spiralDemo.animate();
setInterval(Producer.changePoints,50);
</script>
</body>
</html>