EaselJS-3D

最新推荐文章于 2024-10-30 19:10:39 发布

weixin_30478757

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量82

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/djyxmlauto/archive/2012/06/13/2547673.html

版权

本人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>

执行效果代码:

<!DOCTYPE> <html> <head> <title></title> <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 _stage=null; (function(widnow) { var Demo = function(canvas) { this.initialize(canvas); } var d = Demo.prototype; d.demo_initialize = d.initialize; d.canvas = null; d.stage = null; d.xpos = 0; d.ypos = 0; d.zpos = 1; d.focalLength = 250; d.ballR = 20; d.vpx = null; d.vpy = null; d.ball = null; d.scale = 1; 初始化方法 d.initialize = function(c) { this.demo_initialize; this.canvas = document.getElementById(c); this.stage = new Stage(canvas); 创建小球 this.ball = this.CreateBall(this.ballR); 将小球放到画布中 this.stage.addChild(this.ball); this.vpx = this.canvas.width / 2; this.vpy = this.canvas.height / 2; _this目的是为自定义事件使用 var _this = this; this.stage.onMouseMove = function() { ///stage 中获取鼠标坐标stage.mouseX stage.mouseY _this.xpos = this.mouseX- _this.vpx; _this.ypos = this.mouseY - _this.vpy; }; document.addEventListener('keydown', function(e) { ///监听上下箭头事件 if (e.keyCode == 38) { _this.zpos += 5; _this.scale += 0.005 } if (e.keyCode == 40) { _this.zpos -= 5; _this.scale -= 0.005 } }, false) _stage = this.stage; this.stage.update(); ///添加此代码，Ticker会自动调用自定义tick方法 Ticker.addListener(window); } /// 创建一个小球 d.CreateBall = function(radius) { radius = (radius === undefined) ? 20 : 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(); return shape; } window.Demo = Demo; })(window); var v; window.onload = function() { v = new Demo("canvas"); } ///每帧刷新时调用 function tick() { var scale = v.focalLength / (v.focalLength + v.zpos); 设置小球的x y 坐标 v.ball.x = v.vpx + v.xpos * scale; v.ball.y = v.vpy + v.ypos * scale; 设置小球的比例 v.ball.scaleX = v.ball.scaleY = v.ball.scale = scale; 设置小球的透明度 v.ball.alpha = scale; ///设置小球宽度 v.ball.width = v.ballR * 2 * scale; document.getElementById("scale").innerHTML = scale; ///更新画布，否则不刷新 _stage.update(); } </script> </head> <body> <canvas id="canvas" width="600" height="400"></canvas> <p>键盘上下键改变z方向深度。当前scale：<span id="scale"></span></p> </body> </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的效果

<!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>

大部分代码来自

叶落为重生帖子rotate 3D [初识篇]

好了继续学习

转载于:https://www.cnblogs.com/djyxmlauto/archive/2012/06/13/2547673.html