【简述】

这个系列的开始，不代表Javascript异步编程系列的结束，以后我还会继续那个系列，在我的HTML5版3D实验室也会到处用到Jscex。

但是我还是重新开这个系列，因为它确实是另外一个主题，令人刺激、兴奋、尖叫，刺激人类视网膜神经的主题！

【观看此系列的要求】

1.有一定的空间想象力

2.有立体几何基础、数学和物理基础

3.有基本的编程思想

4.了解HTML5、Javascript

5.了解Jscex更佳

【适合人群】
1.天天写增删改查智商下降者

2.天天写AJAX应用智商下降者

3.天天玩这框架，那类库神马的智商下降者

4.对计算机3D图形学有着浓厚的兴趣

5.对编程语言语法有爱，对算法无爱者

【3D核心】
要深刻掌握3D游戏与动画编程核心，我们先来看一张图，我们再熟悉不过的图，一个正方体，如下：



肯定有人说，有没有搞错，这是立方体吗？？？忽悠我是吗？？那么我们在竖直方向旋转一下：



 

或者我们在水平方向旋转一下：



 

或者我们同时旋转一下，就是我们再熟悉不过的立方体了：



 

当我们看到这个立方体的时候，我们把立方体分别前后和水平旋转了一定的角度，或者也可以这么认为------我们眼睛处于立方体的右上方俯视它，才能看到这个画面。

我们也可以认为眼睛是摄像机，在3D编程中，都有摄像机的概念！！

所以，3D编程当中，我们在呈现动态的3D图像，我们可以旋转物体，也可以旋转摄像机。

空间里的所有点都有一个坐标（x,y,z）：



假设我们旋转物体而非旋转摄像机来呈现3D动画，3D动画最终要显示在一个只有X,Y二维度的显示器当中，

【所以我们只要取到空间所有的坐标的（x,y）坐标映射到显示器上，然后根据z的大小，设置透明度或者颜色等等来体现远近的层次感。】
ps：(x,y的坐标会随着摄像机的位置而发生变化，会因为z的大小产生偏移)

这就是3D编程的核心概念。

【3D初试】
既然Jscex系列是以画圆开始，那么这个系列就以画球开始吧！

XML/HTML Code复制内容到剪贴板
<canvas id="myCanvas" width="480" height="300" style="border:1px solid #c3c3c3;">  
Your browser does not support the canvas element.  
</canvas>  
  
<script type="text/javascript">  
    var c = document.getElementById("myCanvas");  
    var ccxt = c.getContext("2d");  
    var x = 150;  
    var y = 150;  
    var r = 100;  
    var drawAsync = eval(Jscex.compile("async", function () {  
        var j = 3;  
        while (true) {  
             
            cxt.strokeStyle = randomColor();  
            cxt.moveTo(x - r, y);  
            for (var i = x - r; i < x + r + 1; i++) {  
                var tempY = Math.pow(r * r - (x - i) * (x - i), 1 / 2);  
                var foldAngle = Math.PI / j;  
                cxt.lineTo(i, y + tempY - tempY + (tempY * Math.cos(foldAngle)));  
            }  
            jj = j - 0.1;  
            cxt.stroke();  
            $await(Jscex.Async.sleep(100));  
        }  
    }));  
    drawAsync().start();  
  
    function randomColor() {  
        //16进制方式表示颜色0-F      
        var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"]; var strHex = "#";  
        var index;  
        for (var i = 0; i < 6; i++) {  
            //取得0-15之间的随机整数      
            index = Math.round(Math.random() * 15);  
            strHex += arrHex[index];  
        }  
        return strHex;  
    }  
</script>  

转载请注明：睿美印象网站建设工作室www.ruimeiyx.com