EaselJS-3D
本人html5初学者，正处于学习阶段，看到比较好的例子，总是亲手自己试试，慢慢学习。
最近看到叶落为重生帖子rotate 3D [初识篇] 学到学到了一些知识，如何做3D旋转。
本文中利用EaselJS做个一样效果。
demo1
下面就以一个小球来展现改变z坐标的位置对其2d界面下的x，y位置和大小的影响。
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <style> 5 html {overflow:hidden} 6 body {position: absolute; margin:0; padding:0;width:100%; height:100%} 7 canvas {display:block;border:2px solid #ccc; margin:10px auto;} 8 p {text-align: center; font-size:12px;color:#454545;} 9 10 </style> 11 <script src="http://cloud.github.com/downloads/djy/myText/easeljs-0.4.2.min.js" type="text/javascript"></script> 12 13 <script> 14 var _stage=null; 15 (function(widnow) { 16 17 var Demo = function(canvas) { 18 this.initialize(canvas); 19 } 20 var d = Demo.prototype; 21 22 d.demo_initialize = d.initialize; 23 24 d.canvas = null; 25 d.stage = null; 26 d.xpos = 0; 27 d.ypos = 0; 28 d.zpos = 1; 29 d.focalLength = 250; 30 d.ballR = 20; 31 d.vpx = null; 32 d.vpy = null; 33 d.ball = null; 34 d.scale = 1; 35 ////初始化方法 36 d.initialize = function(c) { 37 this.demo_initialize; 38 this.canvas = document.getElementById(c); 39 this.stage = new Stage(canvas); 40 ////创建小球 41 this.ball = this.CreateBall(this.ballR); 42 ////将小球放到画布中 43 this.stage.addChild(this.ball); 44 this.vpx = this.canvas.width / 2; 45 this.vpy = this.canvas.height / 2; 46 //// _this目的是为自定义事件使用 47 var _this = this; 48 49 this.stage.onMouseMove = function() { 50 ///stage 中获取鼠标坐标stage.mouseX stage.mouseY 51 _this.xpos = this.mouseX- _this.vpx; 52 _this.ypos = this.mouseY - _this.vpy; 53 }; 54 document.addEventListener('keydown', function(e) { 55 ///监听上下箭头事件 56 if (e.keyCode == 38) { _this.zpos += 5; _this.scale += 0.005 } 57 if (e.keyCode == 40) { _this.zpos -= 5; _this.scale -= 0.005 } 58 }, false) 59 60 _stage = this.stage; 61 62 this.stage.update(); 63 ///添加此代码，Ticker会自动调用自定义tick方法 64 Ticker.addListener(window); 65 } 66 /// 创建一个小球 67 d.CreateBall = function(radius) { 68 radius = (radius === undefined) ? 20 : radius; 69 var shape = new Shape(); 70 var width = 2 * radius; 71 shape.width = width; 72 shape.graphics 73 .beginFill("black")////填充黑色 74 ///.beginStroke(Graphics.getRGB(0, 0, 0, Math.min(1, width / (2 * radius)))) 75 .arc(0, 0, width / 2, 0, 2 * Math.PI, true)///画圆 76 .endStroke(); 77 return shape; 78 } 79 window.Demo = Demo; 80 })(window); 81 82 var v; 83 window.onload = function() { 84 v = new Demo("canvas"); 85 } 86 87 ///每帧刷新时调用 88 function tick() { 89 var scale = v.focalLength / (v.focalLength + v.zpos); 90 ////设置小球的x y 坐标 91 v.ball.x = v.vpx + v.xpos * scale; 92 v.ball.y = v.vpy + v.ypos * scale; 93 ////设置小球的 比例 94 v.ball.scaleX = v.ball.scaleY = v.ball.scale = scale; 95 ////设置小球的透明度 96 v.ball.alpha = scale; 97 ///设置小球宽度 98 v.ball.width = v.ballR * 2 * scale; 99 document.getElementById("scale").innerHTML = scale; 100 ///更新画布，否则不刷新 101 _stage.update(); 102 } 103 104 </script> 105 </head> 106 <body> 107 108 109 <canvas id="canvas" width="600" height="400"></canvas> 110 <p>键盘上下键改变z方向深度。 当前scale：<span id="scale"></span></p> 111 </body> 112 </html>
执行效果代码:
demo2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <style> html { overflow: hidden; } body { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; } canvas { display: block; border: 2px solid #ccc; margin: 10px auto; } p { text-align: center; font-size: 12px; color: #454545; } </style> <script src="http://cloud.github.com/downloads/djy/myText/easeljs-0.4.2.min.js" type="text/javascript"></script> <script> var _this = null, _stage = null, _balls = null; (function(widnow) { var Demo = function(canvas) { this.initialize(canvas); } var d = Demo.prototype; d.demo_initialize = d.initialize; d.canvas = null; d.balls = []; d.stage = null; d.focalLength = 250; d.ballR = 20; d.ballN = 20; d.vpx = 0; d.vpy = 0; d.angelY = 0; d.scale = 1; d.initialize = function(c) { this.demo_initialize; this.canvas = document.getElementById(c); this.stage = new Stage(canvas); try { for (var i = 0; i < this.ballN; i++) { var ball = this.CreateBall(this.ballR); this.stage.addChild(ball); ball.xpos = Math.random() * 200 - 100 | 0; ball.ypos = Math.random() * 200 - 100 | 0; ball.zpos = Math.random() * 200 - 100 | 0; this.balls.push(ball); } } catch (e) { console.log(e); } this.vpx = this.canvas.width / 2; this.vpy = this.canvas.height / 2; _this = this; this.stage.onMouseMove = function() { _this.angelY = (this.mouseX - _this.vpx) * .001; console.log(_this.angelY); }; _stage = this.stage; _balls = this.balls; this.stage.update(); Ticker.addListener(window); } d.CreateBall = function(radius) { var shape = new Shape(); var width = 2 * radius; shape.width = width; shape.graphics .beginFill("black") .beginStroke(Graphics.getRGB(0, 0, 0, Math.min(1, width / (2 * radius)))) .arc(0, 0, width / 2, 0, 2 * Math.PI, true) .endStroke(); shape.x = shape.y = 0; return shape; } window.Demo = Demo; })(window); var v; window.onload = function () { v = new Demo("canvas"); } function tick() { for (var i = 0; i < _balls.length; i++) { var ball = _balls[i]; var cosy = Math.cos(v.angelY), siny = Math.sin(v.angelY), x1 = ball.xpos * cosy - ball.zpos * siny, z1 = ball.zpos * cosy + ball.xpos * siny; ball.xpos = x1; ball.zpos = z1; var scale = v.focalLength / (v.focalLength + ball.zpos); ball.x = v.vpx + ball.xpos * scale; ball.y = v.vpy + ball.ypos * scale; ball.scaleX = ball.scaleY = ball.scale = scale; ball.alpha = scale; ball.width = v.ballR * 2 * scale; if (i == 0) { document.getElementById("scale").innerHTML = ball.xpos + " , " + scale + "," + ball.xpos * scale; } } _stage.update(); } </script> <body> <canvas id="canvas" width="600" height="400"></canvas> <p> <span id="scale"></span></p> </body> </html>
结合z方向 优点3d的效果
大部分代码来自
好了继续学习