Papervision3D入门第2步
大家有按《入门第1步》中的方法获取了源代码吗?我们今天要开始上手练习了。
《入门第2步》会教大家吧Papervision3D用起来,不过还不能看到让人兴奋的3D效果,但要看到美丽的3D效果,就要打好基础,你很快就会在《入门第3步》看到自己的第一个3D Flash程序了(或者第一个可以看到效果的PV3D程序?) :-)
这一篇文章我是以Flex Builder为例,所以大家请先确认有装了Flex Builder2或者3。
我们开始了。先把你的Flex Builder准备好,我们得找一个干净的“工作空间”,才不会让以前的项目干扰我们的视线 :-) 。点选“File”->“Switch Workspace”,如图:
这时会弹出一个窗口提示我们浏览工作空间所在路径,你可以把工作空间指定到你喜欢的路径上,我的建议。
如果之前你有建过Flex项目的话,那这时候会发现这些项目从导航窗口消失了,不用担心,它们不会没掉,只要你再Switch Wordspace到原来路径他们就又会出现了 :-)
第二步我们新建一个ActionScript项目,是纯ActionScript项目噢,不要建成别的了,你可以参考下面的截图:
然后输入项目名等信息,因为我用的是Flex Builder3所以底下有一个选择SDK的选项,不过一般不用去管他。
你可以按照项目名做“主类”的名称,也可以自己命名,我把它命名为Main。
变成了:
接下来需要用到我们上次通过SVN获取到的Papervision3D源代码了,却确的说是AS3版本的。先找到你上次导出PV3D源代码的路径,你将会看到图上这样的目录结构:
把这些文件夹全部选中,然后拖拽到刚刚新建的PV3D试验项目中,鼠标会有一个加号出现,然后放开鼠标,PV3D的所有文件就会复制一份到我们的项目目录下了 :-) 像这样:
现在我们开始要在Main.as添加使用PV3D的代码了。你可以把下面这段代码复制一份到你的主类文件里,再把类名改成你自己的。也可以先看一遍理解下,再自己模仿写一遍。因为代码很简短,我就不依依做解释了,看看注释你应该就能明白。
package { import flash.display.Sprite; import org.papervision3d.cameras.Camera3D; import org.papervision3d.objects.Plane; import org.papervision3d.scenes.MovieScene3D; import org.papervision3d.materials.WireframeMaterial; [SWF(width='400',height='400',backgroundColor='0xFFFFFF',frameRate='30')] public class Main extends Sprite { private var _container :Sprite; private var _scene :MovieScene3D; private var _camera :Camera3D; private var _plane:Plane; public function Main() { // 创建3D舞台的容器 _container = new Sprite; _container.x = 200; _container.y = 200; addChild( _container ); // 创建3D舞台 _scene = new MovieScene3D( _container ); // 创建摄像头 _camera = new Camera3D(); _camera.z = -500; _camera.zoom = 5; // 创建一个线条材质 var material:WireframeMaterial = new WireframeMaterial(0x000000); // 创建一个 128 * 128 的平面 _plane = new Plane( material, 128, 128, 2, 2); // 将平面对象加入到舞台 _scene.addChild( _plane ); // 绘制3D舞台 _scene.renderCamera( _camera ); } } }
上面代码如果运行正常你应该可以看到如下效果:
不管多复杂的PV3D程序,流程都和这个小程序一样,创建容器,创建舞台,创建摄像头,创建3D对象,然后显示。所以牢记这几个步骤是很重要的 :-)
接下来我们再加些代码让我们的3D对象可以动起来。
以下是修改后的代码:
package { import flash.display.Sprite; import org.papervision3d.cameras.Camera3D; import org.papervision3d.objects.Plane; import org.papervision3d.scenes.MovieScene3D; import org.papervision3d.materials.WireframeMaterial; import flash.events.Event; [SWF(width='400',height='400',backgroundColor='0xFFFFFF',frameRate='30')] public class Main extends Sprite { private var _container :Sprite; private var _scene :MovieScene3D; private var _camera :Camera3D; private var _plane:Plane; public function Main() { // 创建3D舞台的容器 _container = new Sprite; _container.x = 200; _container.y = 200; addChild( _container ); // 创建3D舞台 _scene = new MovieScene3D( _container ); // 创建摄像头 _camera = new Camera3D(); _camera.z = -500; _camera.zoom = 5; // 创建一个线条材质 var material:WireframeMaterial = new WireframeMaterial(0x000000); // 创建一个 128 * 128 的平面 _plane = new Plane( material, 128, 128, 2, 2); // 将平面对象加入到舞台 _scene.addChild( _plane ); // 绘制3D舞台 _scene.renderCamera( _camera ); this.addEventListener(Event.ENTER_FRAME, OnEnterFrame); } private function OnEnterFrame(event:Event):void{ _plane.rotationX += 5; _plane.rotationY += 5; _scene.renderCamera(_camera); } } }
运行效果:
我们在原有代码的基础上加了ENTER_FRAME事件的监听,让我们的平面对象再每一帧都旋转一点,再重新绘制3D舞台,你可以修改rotationX和Y的值,或者加上rotationZ的变化,看看效果。
所有的动画型PV3D程序也都是这种结构,先初始化基础的3D对象,然后注册ENTER_FRAME事件监听程序,在每一帧对显示内容做调整,然后重新绘制。
假设你的帧速设置为40,就是每秒Flash会调用ENTER_FRAME监听函数40次。这样就得限制你的ENTER_FRAME监听函数每次执行消耗的时间在1/40秒内,如果超过这个限制,你的程序可能就会看起来一卡一卡的了。
你现在已经懂得PV3D程序的基础结构了,后面的教程我们会开始一起熟悉PV3D的内置对象和一些概念,再后面如果我们可以走的再深入些,我们可能就会一起学习些3D物理 :-)