HTML5版3D实验室一：3D游戏与动画编程核心_H5之家

【简述】

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

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

【观看此系列的要求】

1.有一定的空间想象力

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

3.有基本的编程思想

4.了解HTML5、Javascript

5.了解Jscex更佳

1.天天写增删改查智商下降者

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

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

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

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

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

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

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

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

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

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

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

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

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

ps：(x,y的坐标会随着摄像机的位置而发生变化，会因为z的大小产生偏移)

这就是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>

原文链接： http://www.cnblogs.com/iamzhanglei/archive/2011/09/20/2182025.html