html5动画,HTML5版3D实验室系列【一】----3D游戏与动画编程核心

【简述】

这个系列的开始,不代表Javascript异步编程系列的结束,以后我还会继续那个系列,在我的HTML5版3D实验室也会到处用到Jscex。
但是我还是重新开这个系列,因为它确实是另外一个主题,令人刺激、兴奋、尖叫,刺激人类视网膜神经的主题!
 

【观看此系列的要求】

1.有一定的空间想象力
2.有立体几何基础、数学和物理基础
3.有基本的编程思想
4.了解HTML5、Javascript
5.了解Jscex更佳
 

【适合人群】

1.天天写增删改查智商下降者
2.天天写AJAX应用智商下降者
3.对计算机3D图形学有着浓厚的兴趣
4.对编程语言语法有爱,对算法无爱者
 

【3D核心】

要深刻掌握3D游戏与动画编程核心,我们先来看一张图,我们再熟悉不过的图,一个正方体,如下:
cube1HTML5版3D实验室系列【一】----3D游戏与动画编程核心html5动画
肯定有人说,有没有搞错,这是立方体吗???忽悠我是吗??那么我们在竖直方向旋转一下:
cube2cube1HTML5版3D实验室系列【一】----3D游戏与动画编程核心html5动画
 
或者我们在水平方向旋转一下:
cube3cube2cube1HTML5版3D实验室系列【一】----3D游戏与动画编程核心html5动画
 
或者我们同时旋转一下,就是我们再熟悉不过的立方体了:
cubecube3cube2cube1HTML5版3D实验室系列【一】----3D游戏与动画编程核心html5动画
 
当我们看到这个立方体的时候,我们把立方体分别前后和水平旋转了一定的角度,或者也可以这么认为------我们眼睛处于立方体的右上方俯视它,才能看到这个画面。
我们也可以认为眼睛是摄像机,在3D编程中,都有摄像机的概念!!
所以,3D编程当中,我们在呈现动态的3D图像,我们可以旋转物体,也可以旋转摄像机。
空间里的所有点都有一个坐标(x,y,z):
zbxcubecube3cube2cube1HTML5版3D实验室系列【一】----3D游戏与动画编程核心html5动画
假设我们旋转物体而非旋转摄像机来呈现3D动画,3D动画最终要显示在一个只有X,Y二维度的显示器当中,

【所以我们只要取到空间所有的坐标的(x,y)坐标映射到显示器上,然后根据z的大小,设置透明度或者颜色等等来体现远近的层次感。】

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

【3D初试】

既然Jscex系列是以画圆开始,那么这个系列就以画球开始吧!
Your browser does not support the canvas element.
 

【在线演示】

Your browser does not support the canvas element.  
 
【javascript异步编程系列】javascript异步编程系列目录
Tags:  html5游戏 html5网站 html5 html5编程 html5动画

延伸阅读

最新评论

发表评论