3D丝网作者：Neoxone 发表时间： 2014年05月6号，星期二 阅读：5,343 次 要求浏览器支持WebGL或Canvas， 太久没更新Blog了，拿来充个数，顺便测测手机下能有怎样一个效果。 <!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> 相关文章:《Three.js制作3D螺旋线动画》《(Three.js) 页面展现3D模型》《百度UEO基于canvas绘制热力图的演示》《浅析圆形物体的碰撞检测及应用》《Transform变形方法的可视化演示》 标签： canvas, threejs 这篇文章发布于 2014年05月6号，星期二，16:12，归类于 HTML5。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。
回复