首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Flash >

Flash/Flex学习札记(49):背面剔除与 3D 灯光

2012-10-12 
Flash/Flex学习笔记(49):背面剔除与 3D 灯光今天继续:上一回Flash/Flex学习笔记(50):3D线条与填充?里,我们

Flash/Flex学习笔记(49):背面剔除与 3D 灯光

今天继续:上一回Flash/Flex学习笔记(50):3D线条与填充?里,我们知道任何一个3D多面体上的某一个面,都可以分解为多个三角形的组合。比立方体为例,每个面都由二个三角形组成,但在那一篇的示例中明显有一个问题:不管立方体的某一个面是不是应该被人眼看见(比如转到背面的部分,应该是看不见的),这一面都被绘制出来了。

?

在这一篇的学习中,我将带大家一起学习如何将背面(即看不见的面)删除掉,即所谓的“背面剔除”。

?

先做一些预备知识的铺垫:立方体中每个面都有一个"外面"和"里面"。外面即正对观察者向外的这一面,里面指朝向立方体内部的这一面。我们在3D编程里,通常指的都是“外面”

?

?Flash/Flex学习札记(49):背面剔除与 3D 灯光

如上图:这是立方体的前面,分解为0-1-2和0-2-3二个三角形(注意三个顶点的顺序为"顺时针"方向),当立方体的"前面"旋转到"后面"所处位置时,三角形的顶点顺序由“顺时针”改变为“逆时针”。

?

言外之意:如果我们能判断出某个三角形的顶点顺序为“逆时针”时,这个三角形肯定处于背面,这时应该将它隐藏或不绘制。

?

所以,如果我们在构建立方体每个面的三角形时,都遵守上面的“三角形顶点顺时针法则”,那么上面的解决办法应该就能满足要求了,回顾一下立方体三角形数组的构建代码:

如上图,对于每个三角形必须先确定其“法向”向量norm,norm即为向量ab与向量bc的叉积。然后光源light本身也是一个向量,向量light与向量norm会形成一个夹角θ,θ的取值范围在0~PI(即180度)之间,θ为180度时即为正面直射,θ为0度时即为背面照射(实际上小于等于90度时,已经照不到了),直射意味着三角形所在平面颜色应该正常显示(最明亮),背面或照不到时,应该颜色变暗,接近黑色。

关于这个结论,可以先来看下面的演示:(光源的位置我设置为动画中心,距离屏幕向外100px的位置,即正对着屏幕中心照射)

一步一步来,先定义Light向量类:
?package {?

???? public class Light {? ???????? public var x:Number;? ???????? public var y:Number;? ???????? public var z:Number;? ???????? private var _brightness:Number;? ??????????? ???????? public function Light(x:Number=-200,y:Number=-200,z:Number=-200,brightness:Number=1) {? ???????????? //light向量的空间坐标? ???????????? this.x = x;? ???????????? this.y = y;? ???????????? this.z = z;? ???????????? //亮度? ???????????? this.brightness = brightness;? ???????? }? ??????????? ???????? public function set brightness(b:Number):void { </

热点排行