Three.js制作3D螺旋线动画

Three.js制作3D螺旋线动画
作者：Neoxone 发表时间： 2013年02月6号，星期三阅读：14,342 次

之前在微博上看到了这张图

一直想用three.js做个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="/blog/resource/threejs/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>

纯属娱乐。看不见的同学，推荐您使用chrome，firefox浏览器。

标签： canvas, Three.js, webgl

这篇文章发布于 2013年02月6号，星期三，22:49，归类于 HTML5。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

CSSASSCSSASS

Three.js制作3D螺旋线动画
作者：Neoxone 发表时间： 2013年02月6号，星期三阅读：14,342 次

相关文章:

5 条评论发表在“Three.js制作3D螺旋线动画”上

留下回复

Three.js制作3D螺旋线动画作者：Neoxone 发表时间： 2013年02月6号，星期三 阅读：14,342 次

相关文章:

5 条评论 发表在“Three.js制作3D螺旋线动画”上

留下回复

Three.js制作3D螺旋线动画
作者：Neoxone 发表时间： 2013年02月6号，星期三阅读：14,342 次

5 条评论发表在“Three.js制作3D螺旋线动画”上