本文由中国 sanbos 编译,转载请保留此信息!
本系列Flash教程由中国Flash互助课堂专为Flash新手制作,更多教程和练习请点击这里,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临!
Papervision3D(简称PV3D)是一个开源的3D引擎,用它可以比较容易制作出理想的3D效果,目的在于实现更加炫丽美观、功能强大的Flash 3D Web应用程序。本例为Papervision3D入门系列教程,在本课中我们将学习Papervision3D对象的建立~~
更多AS 3.0代码教程:http://www.jcwcn.com/portal-topic-topicid-2.html
3D对象:
在开始创建对象之前,让我们来看看对象在3D空间是怎样打破flash的传统风格的.
在flash中你将一个对象定位到舞台上x:0,y:0的位置,对象被定位到左上角上.增加x对象向右边移动,增加y对象向下边移动.相反地,在 Papervison3D中,x:0,y:0,z:0时对象在3D场景的中心(不在左上角).开始时Camera3D被定位在 x:0,y:0,z:-1000,并对准原始点:x:0,y:0,z:0.增加x对象向右移动,增加y对象向下移动,增加z,对象向地平线移动.
同样,要记住在3D对象相对于照相的位置的数字.你不要依赖于传统二维空间的flash像素的概念.下面是在3D中照相机位置的意义:
x=10;//在Scene3D中心右边10 像素
x=-10;//在Scene3D中心左边10 像素
y=-10//在Scene3D中心下边10 像素
z=-10;//靠近Scene3D中心10个像素(记住照相机的省缺z值是-1000,将z从0移到-10,将离-1000更近一些.)
如果你是那种一定要明白在flash2D中怎么实现3D效果的人,那么带着你的数学知识阅读下面的文章:
http://en.wikipedia.org/wiki/Quarterion
http://www.adobe.com/devnet/flash/articles/3d_classes_03.html
http://www.isner.com/tutorials/q ... rnion_spells_14.htm
就算你不明白这些文章中涉及的数学知识,你也许知道3D对象是建立在3D坐标之上的.这些3D坐标(也可叫顶点)来自三角形.三角形组成多边形的网状物或平常人叫做3D对象.
注意:PV3D使用画家的算法来排列这些可见的三角形.画家的算法非常快(理想的flash payer中),但在三角形重叠时会失败.你可以在你的3D对象中创建更多的三角形来减少重叠的发生.
我把平面看做是多数PV3D项目中最有用的3D对象.尤其是在交互式的项目中.奇怪的是,一个平面并不能被描述为3D对象,因为它没有深度.一个平面是两个静态三角形相互对接形成的矩形. 记住,将所有的3D对象包含到3D场景中,下面是使用一个平面的例子,创建它并将它添加到3D场景中.
var plane:Plane = new Plane();
scene.addChild(plane);
一个平面省缺的框架材料(后面的章节将讨论)为宽500和高500.这样上面的代码将产生一个定位于x:0,y:0,z:0的宽和高均为500的平面框架正面的照相机(如果照相机在前面所讲的省缺的位置). 当你用一张图片作为材料粘帖到它里面,这个平面将是这张图片的省缺大小的位图.平面有下列可用参数:
Plane( material:MaterialObject3D=null, width:Number=0,
height:Number=0, segmentsW:Number=0, segmentsH:Number=0,
initObject:Object=null )
Material(材料), width, and height 不需在说明了吧.. SegmentsW and segmentsH 是设置平面宽和高的片段数量.比较多的片段数量将避免在平面各层次三角形旋转时产生扭曲的图象.下面的截图展示了宽为4个片段 ,高为3个片段的平面.
.
应当注意当创建很多平面时,要为每一个面设置宽和高的片段数量,你将添加更多的三角形(一般来说为一个平面增加一个矩形确能优化平面的细节). Flash player能支持三角形的数量依赖于你的程序,但一般来说不要超过2000个.
最后一个可选参数是initObject,能够储存平面的x, y, z, rotationX, rotationY, rotationZ, scaleX, scaleY, scaleZ, and “特别的”参数.作为选择你也可以在创奸平面后设置这些参数.下面的例子快速地说明了这个问题:
var m:WireframeMaterial = new WireframeMaterial();
//width and height
var w:Number = 800;
var h:Number = 800;
//segmentsW and segmentsH
var sW:Number = 1;
var sH:Number = 1;
var initObject:Object = new Object();
initObject.x = 100;
initObject.rotationY = 30;
initObject.scaleZ = 20;
//Option #1 using initObject
var plane:Plane = new Plane(m, w, h, sW, sH, initObject);
scene.addChild(plane);
//Option #2 setting properties directly
var plane:Plane = new Plane(m, w, h, sW, sH, initObject);
plane.x = 100;
plane.rotationY = 30;
plane.scaleZ = 20;
scene.addChild(plane);
关于平面最后一点注意:如果你旋转一个平面,你会注意到平面的另一边消失了.如果你想平面的两边都有材质的话,你将需要为你平面的材料设置 “doubleSided”(两边)属性为可用.
material.doubleSided = true;
Sphere(球体)
创建球体的方法非常类似创建一个平面.
var sphere:Sphere = new Sphere();
scene.addChild(sphere);
一个球体的省缺参数类似于一个平面的参数.球体用radius(半径)代替宽和高.如果你还能记得高中的课程,你应该想起半径是圆心到圆周的距离. 与平面简单地用宽和高相反,球体用半径计算中心到边的距离,创建一个三角形的集合来制作一个球体.下面是省缺的参数:
Sphere( material:MaterialObject3D=null, radius:Number=100,
segmentsW:int=8, segmentsH:int=6,
initObject:Object=null )
简单来说,一个圆锥体和一个圆柱体将用类似的方法创建,下面是省缺参数:
圆椎:
Cone( material:MaterialObject3D=null, radius:Number=100,
height:Number=100, segmentsW:int=8, segmentsH:int=6,
initObject:Object=null )
圆柱:
Cylinder( material:MaterialObject3D=null, radius:Number=100,
height:Number=100, segmentsW:int=8, segmentsH:int=6,
topRadius:Number=-1,
initObject:Object=null )
Cube(立方体)
当你将6个平面组合成一个盒子的形状你会得到什么?一个立方体.
现在你应该已经熟练掌握了创建3D对象的方法了, 不过立方体将需要一个 MaterialsList (后面的文章讨论). 你将明白怎样用一个MaterialsList 创建立方体.
var frontMaterial:WireframeMaterial = new WireframeMaterial();
var backMaterial:WireframeMaterial = new WireframeMaterial();
var leftMaterial:WireframeMaterial = new WireframeMaterial();
var rightMaterial:WireframeMaterial = new WireframeMaterial();
var topMaterial:WireframeMaterial = new WireframeMaterial();
var bottomMaterial:WireframeMaterial = new WireframeMaterial();
var materialsList:MaterialsList = new MaterialsList();
materialsList.addMaterial(frontMaterial, "front");
materialsList.addMaterial(backMaterial, "back");
materialsList.addMaterial(leftMaterial, "left");
materialsList.addMaterial(rightMaterial, "right");
materialsList.addMaterial(topMaterial, "top");
materialsList.addMaterial(bottomMaterial, "bottom");
var cube:Cube = new Cube(materialsList);
scene.addChild(cube);
当立方体正面向前,使用镜头是省缺的:z:-1000,看位于x:0,y:0,z:0的立方体,你看到的是立方体的背面,没有任何景深,它看上去就是一个平面.你可以设置立方体的rotation属性看到整体的立主体效果.下面是立方体的省缺参数:
Cube( materials:MaterialsList, width:Number=500, depth:Number=500,
height:Number=500, segmentsS:int=1, segmentsT:int=1, segmentsH:int=1,
insideFaces:int=0, excludeFaces:int=0, initObject:Object=null )
片段需要稍微说明一下,而方法与平面的一样:
• segmentS – 径向的段的数目(平面与宽垂直)省缺为1.
• segmentsT –横向段的数目(平面与深度垂直)省缺值与 segmentsS一样.
. segmentsH – 水平方向段的数目(平面与高度垂直)省缺值与segmentsS一样.
insideFaces参数决定在立方体中哪一面会被显示.这在你想将照相机放到立方体内部仿佛在房间中一样是很有用的. 使用下面静态的公共变量,设置立方体钭包含的面:
• Cube.NONE
• • Cube.FRONT
• • Cube.BACK
• • Cube.LEFT
• • Cube.RIGHT
• • Cube.TOP
• • Cube.BOTTOM
• • Cube.ALL
简单设置一个 insideFaces 整数即可确定在立方体中你想呈现那些面.这个例子中,假如你只想包含顶面,查写下列代码:ollowing:
var insideFaces:int = Cube.TOP;
var cube:Material = new Cube(m, w, d, h, sS, sT, sH, insideFaces);
只有左,右和下面::
var insideFaces:int = Cube.LEFT + Cube.RIGHT + Cube.BOTTOM;
var cube:Material = new Cube(m, w, d, h, sS, sT, sH, insideFaces);
除前面外的所有面:
var insideFaces:int = Cube.ALL - Cube.FRONT;
var cube:Material = new Cube(m, w, d, h, sS, sT, sH, insideFaces);
下一个参数, excludeFaces(排除的面)使用的方法相同,但是是排除你不想要面.想象一下打开盖子的鞋盒.
Collada
这是PV3D真正令人激动的东西,你可以用3D软件创建一个3D模型(3ds max, Maya, Blender, Swift3D等.),将它导出为Collada 文件.然后使用PV3D的DAE类加载进来.不幸的是这个内容可以专门写一篇文章,不过这里有几个演示函数对你也许有用.
Loading Collada Files into Papervision3D
Testing Kinematics with Papervision3D Collada
DCC Tutorials
对本文感兴趣的朋友可以到这里与作者交流:http://bbs.jcwcn.com/viewthread.php?tid=249388
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/fjc/)