谈谈3d吧


  难产的第三篇,看到第二篇也过了快两个月了。

  canvas,中文叫画布。这是一个HTML5新加的技术,也是将来要代替Flash的功能之一。不少人都在说,由于canvas的存在,HTML5的游戏成为可能。从本质上来说,canvas就是一个图像的显示,你在上面可以绘制出你所想的任何画面(当然前提你是个大触)。

  3D物体是由XYZ三个轴所构成的,这3个轴让我们看到的东西变得立体,即有了物体的近大远小的感觉。而2D则是给人一个面的图像,可以理解成3D是由无数个2D所构成的图像(多一个轴呢)。canvas其实就是一个画板,画板很平,非常的平,其本身就只能表示一个面,当然你的电脑屏幕其实也只是一个面。所以canvas想有3D的感觉就必须我们自身模拟出3D的感觉,透过canvas的XY轴给人一种3D的感觉。其实就是一种错觉,一些街头艺术的视频不是常有嘛,一些艺术家在地上绘画了一张图,在某个角度上看,宛如真实存在般的。

  现在比如说在我们眼前有一个距离我们10个单位的正方形,所以在我们视野里,有一个正方形如下图:

img

  在相同的位置,将一个大小相同的正方形再向后平移10个单位,可以很简单的得出在第一个正方形中心有一个长宽只有其一半的第二个正方形,如下图:

img

  由此看出,由于近大远小的关系,远处的图形每条都逐渐变小。将线转化成点,我们可以得出,每个点由于距离的拉长,都会往视线的中心点慢慢靠近。所以我们将立体物体的各个点两个轴确定了其在canvas位置后,再通过第三个轴的远近进行缩放,就可以达到一个简单的立体效果。

  好了,现在近大远小的关系已经知道了,但是只能看一个方向的立体面肯定是不行的,我们要360全方面进行查看。如果身边有立方体的话,可以拿在手上转转看,肯定是一脸懵逼吧(当然不懵逼的话说明你几何真的是非常好了)。从整体来看物体的旋转,未免略显复杂,这时我们还是一个一个点来看。将点绕着中心点去旋转,很明显就发现了,这个点的运动轨迹其实就是一个球,一个以中心点为中心,两点距离为半径的球。现在再次增加一个条件,绕着某个轴进行旋转,不难发现,轨迹是球。一个物体的旋转我们可以拆分成三部分:

绕X轴转->绕Y轴转->绕Z轴转

现在我们只要将这3个过程分别算出来就能做出一个物体运动过程了,这其实是一个考验你数学的过程,知道的人应该已经不需要看下去了。

  先说一个公式:

_x = x*cosA - y*sinA;
_y = x*sinA + y*cosA;

  这是一个平面坐标系内旋转所得点的公式,求证方法很多,这也不是数学课,想知道的自己去探求吧。我们将三个旋转的过程分别带入这个公式,此时我们就得出物体的旋转后的坐标啦。对于canvas的3D,我就想说那么多了,也没什么特殊的东西,如果对canvas、对3D感兴趣的话,可以看看别的大神是怎么写的,推荐一个国外大神写的three.js。说出来可能有点不好意思,虽然推荐大家去看,但是本人却并没有看完。

  最后是自己写的肥肠简单的canvas写的3D,链接是下面是:

3D-demo

代码还有还多瑕疵,有些效果也是不尽人意,看官莫笑๑乛◡乛๑