Papervision3D入门第2步

分享Flash3DPapervision3D by 达达 at 2007-09-03

大家有按《入门第1步》中的方法获取了源代码吗?我们今天要开始上手练习了。

《入门第2步》会教大家吧Papervision3D用起来,不过还不能看到让人兴奋的3D效果,但要看到美丽的3D效果,就要打好基础,你很快就会在《入门第3步》看到自己的第一个3D Flash程序了(或者第一个可以看到效果的PV3D程序?) :-)

这一篇文章我是以Flex Builder为例,所以大家请先确认有装了Flex Builder2或者3。

我们开始了。先把你的Flex Builder准备好,我们得找一个干净的“工作空间”,才不会让以前的项目干扰我们的视线 :-) 。点选“File”->“Switch Workspace”,如图:

pv11.PNG

这时会弹出一个窗口提示我们浏览工作空间所在路径,你可以把工作空间指定到你喜欢的路径上,我的建议。

pv12.PNG

如果之前你有建过Flex项目的话,那这时候会发现这些项目从导航窗口消失了,不用担心,它们不会没掉,只要你再Switch Wordspace到原来路径他们就又会出现了 :-)

第二步我们新建一个ActionScript项目,是纯ActionScript项目噢,不要建成别的了,你可以参考下面的截图:

pv13.PNG

然后输入项目名等信息,因为我用的是Flex Builder3所以底下有一个选择SDK的选项,不过一般不用去管他。

pv14.PNG

你可以按照项目名做“主类”的名称,也可以自己命名,我把它命名为Main。

pv15.PNG

变成了:

pv16.PNG

接下来需要用到我们上次通过SVN获取到的Papervision3D源代码了,却确的说是AS3版本的。先找到你上次导出PV3D源代码的路径,你将会看到图上这样的目录结构:

pv17.PNG

把这些文件夹全部选中,然后拖拽到刚刚新建的PV3D试验项目中,鼠标会有一个加号出现,然后放开鼠标,PV3D的所有文件就会复制一份到我们的项目目录下了 :-) 像这样:

pv18.PNG

现在我们开始要在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物理 :-)