Papervision3D入门第4步

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

本来打算《入门第4部》讲些关于贴图的内容,但PV3D的内置对象贴图太容易了,并且我们前两篇文章的程序中都有涉及到了,所以今天除了讲解材质的使用外,还打算做一下复习,回顾下基本的PV3D程序结构。

我发现大部分做Flash的朋友不是像我一样从ActionScript3时代开始的,而是从Flash的动画制作时代开始的,这些前辈都已经习惯了以时间轴来思考程序中的变化过程,而PV3D的程序则普遍是以帧位单位来控制内容的变化,再加上AS3相对AS2也变化比较大,所以对于传统AS2程序员和Flash动画制作人员,单纯给一个范例代码,还是有些不够的。

在讲材质贴图直接,我们就先回顾下一个基本的PV3D程序结构。

首先,我们会有一个类,不管在Flash 9 CS3中还是Flex Builder的ActionScript项目中,都会有一个类做为整个Flash程序的入口。在Flash 9 CS3中,可以在底部的Flash属性栏里找到主类的设置选项。

我喜欢把我的主类命名为Main,其实命名位什么都无所谓的,只要记得保持文件名和类名一致就可以 :) 。不过记得主类一定要继承自Sprite类。

package {
    import flash.display.Sprite;

    public class Main extends Sprite
    {
        public function Main()
        {

        }
    }
}

上面就是我们的主类的代码了,Main()函数是Main类的构造函数,就是说当你执行new Main();时,Flash虚拟机会调用这个函数,初始化Main类的对象(类的实例叫对象,达达是人这个类的一个实例,所以是个对象....)。所以,Main()函数就是我们整个Flash的入口了(如果你的类叫做AA,那你的入口就是AA()请不要和C语言的Main函数混淆),这里面的程序最先被执行,所以我们可以在这里面放一些初始化PV3D的代码。下面我们就一步步初始化PV3D。

首先,PV3D的3D舞台需要一个容器,用来容纳整个3D舞台。这个容器至少是Sprite类型的,因为Sprite是AS3或者说Flash9里,显示对象的最小单位,这也是我们的主类一定要继承自Sprite的原因,因为它需要被显示。

我们现在定义一个容器变量_container,初始化它并把它加到主类的显示列表里。我习惯实例变量用小写开头,前面加下划线 :)

package {
    import flash.display.Sprite;

    public class Main extends Sprite
    {
        private var _container :Sprite;

        public function Main()
        {
            // 创建3D舞台的容器
            _container = new Sprite();
            _container.x = 100;
            _container.y = 100;

            //将它显示出来
            addChild( _container );
        }
    }
}

我们有了容器,现在需要一个3D舞台。

package {
    import flash.display.Sprite;

    import org.papervision3d.scenes.MovieScene3D;


    public class Main extends Sprite
    {
        private var _container :Sprite;
        private var _scene :MovieScene3D;

        public function Main()
        {
            // 创建3D舞台的容器
            _container = new Sprite();
            _container.x = 100;
            _container.y = 100;

            //将它显示出来
            addChild( _container );

            // 创建3D舞台
            _scene = new MovieScene3D( _container );
        }
    }
}

然后我们需要在舞台上放一个摄像头,他代表我们的眼睛,他能看到的就是你看到的。

package {
    import flash.display.Sprite;

    import org.papervision3d.scenes.MovieScene3D;
    import org.papervision3d.cameras.Camera3D;

    public class Main extends Sprite
    {
        private var _container :Sprite;
        private var _scene :MovieScene3D;
        private var _camera :Camera3D;

        public function Main()
        {
            // 创建3D舞台的容器
            _container = new Sprite();
            _container.x = 100;
            _container.y = 100;

            //将它显示出来
            addChild( _container );

            // 创建3D舞台
            _scene = new MovieScene3D( _container );

            // 创建摄像头
            _camera = new Camera3D();
            _camera.z = -500;
            _camera.zoom = 5;

            //把摄像头看到的显示出来
            _scene.renderCamera(_camera);
        }
    }
}

现在我们需要有一个3D对象,把它显示出来我们才算成功 :) 。PV3D的所有3D对象都是继承自displayObject3D,就像Flash里的Sprite一样它是最小单位。如果学过面向对象编程,你就会知道父类型的变量可以引用子类型的对象。比如MovieClip是Sprite的子类,那底下的代码是成立的:

var temp:Sprite  = new MovieClip();

考虑到我们程序的通用性,我们的显示对象使用displayObject3D类型,后面初始化时候你可以把它初始化成任意displayObject3D的子类型对象。

光一个3D显示对象还是不够的,它需要有个“皮”,你才能看到它....所以,我们同时需要一个材质贴图(至少需要一个,如果是立方体,就需要六个面的贴图)。PV3D中所有材质贴图的基类是MaterialObject3D,所以考虑到通用性.....我就不多说了。

package {
    import flash.display.Sprite;

    import org.papervision3d.scenes.MovieScene3D;
    import org.papervision3d.cameras.Camera3D;

    import org.papervision3d.core.proto.MaterialObject3D;
    import org.papervision3d.objects.DisplayObject3D;

    import org.papervision3d.materials.WireframeMaterial;
    import org.papervision3d.objects.Sphere;

    public class Main extends Sprite
    {
        private var _container :Sprite;
        private var _scene :MovieScene3D;
        private var _camera :Camera3D;

        private var _material:MaterialObject3D;
        private var _displayObj:DisplayObject3D;

        public function Main()
        {
            // 创建3D舞台的容器
            _container = new Sprite();
            _container.x = 100;
            _container.y = 100;

            //将它显示出来
            addChild( _container );

            // 创建3D舞台
            _scene = new MovieScene3D( _container );

            // 创建摄像头
            _camera = new Camera3D();
            _camera.z = -500;
            _camera.zoom = 5;

            //黑色的线框材质
            _material = new WireframeMaterial(0x000000);

            //弄个球玩玩
            _displayObj = new Sphere(_material,  80, 10, 10);

            //把显示对象添加到舞台
            _scene.addChild(_displayObj);

            //把摄像头看到的显示出来
            _scene.renderCamera(_camera);
        }
    }
}

把程序运行起来,你可以放在Flex Builder的ActionScript项目中运行,也可以在Flash里把影片的主类设置成我们现在写的代码,不要说你不会Flex Builder就做不了PV3D,这和Flex一点关系都没有的。

运行起来你应该会看到一个像这的球:

现在我们要让球动起来。记得我之前说的吗?PV3D主要是以帧为单位来控制变化,所以我们需要一个方法可以控制到每一帧。AS3中我们只要注册一个Event.ENTER_FRAME事件的监听程序就可以监听到每一帧开始的时刻。然后,我们可以在我们的监听函数里,做我们需要做的,比如计算,或着让显示对象移动旋转等。

而PV3D要求每次舞台发生变化时都要显式的调用舞台对象的renderCamera,重新绘制,否则内容始终是不重绘的。

下面是我们的新代码,注意加了一句调用addEventListener的代码,和一个OnEnterFrame函数。

package {
    import flash.display.Sprite;

    import org.papervision3d.scenes.MovieScene3D;
    import org.papervision3d.cameras.Camera3D;

    import org.papervision3d.core.proto.MaterialObject3D;
    import org.papervision3d.objects.DisplayObject3D;

    import org.papervision3d.materials.WireframeMaterial;
    import org.papervision3d.objects.Sphere;
    import flash.events.Event;

    public class Main extends Sprite
    {
        private var _container :Sprite;
        private var _scene :MovieScene3D;
        private var _camera :Camera3D;

        private var _material:MaterialObject3D;
        private var _displayObj:DisplayObject3D;

        public function Main()
        {
            // 创建3D舞台的容器
            _container = new Sprite();
            _container.x = 100;
            _container.y = 100;

            //将它显示出来
            addChild( _container );

            // 创建3D舞台
            _scene = new MovieScene3D( _container );

            // 创建摄像头
            _camera = new Camera3D();
            _camera.z = -500;
            _camera.zoom = 5;

            //黑色的线框材质
            _material = new WireframeMaterial(0x000000);

            //弄个球玩玩
            _displayObj = new Sphere(_material,  80, 10, 10);

            //把显示对象添加到舞台
            _scene.addChild(_displayObj);

            //把摄像头看到的显示出来
            _scene.renderCamera(_camera);

            this.addEventListener(Event.ENTER_FRAME, OnEnterFrame);
        }

        private function OnEnterFrame(event:Event):void{
            //以Y轴为轴旋转
            _displayObj.rotationY += 5;

            _scene.renderCamera(_camera);
        }
    }
}

现在你就能看到球转啊转的样子:

花了很大篇幅重新复习了一遍PV3D程序的基础结构....现在可以开始讲讲基本的材质贴图了。其实我们上面的程序就已用到了线框材质贴图。除了线框材质外,PV3D还支持颜色材质,位图材质等,所有这些材质贴图的类都在org.papervision3d.materials包里。

我们给上面的程序换上一个黄色的材质贴图看看会是什么样。只要把new WireframeMaterial(0x000000);改成new ColorMaterial(0xFFFF00);然后记得import org.papervision3d.materials.ColorMaterial;就OK了。

你的效果应该会和我的一样:

再试试位图文件材质,把new ColorMaterial(0xFFFF00);改成new BitmapFileMaterial("texture.jpg");这里的"texture.jpg"是我的贴图文件路径,你需要根据你的需要设置,记得这个路径是url格式,不是文件系统路径。

贴图效果:

其他的贴图我就不多说了,大家可以自己实验看看。