Papervision3D를 익혀보자 (입문)

1.Papervision3D 관련 class들을 다운받는다. (  http://code.google.com/p/papervision3d/  )
2.Papervision3D는 AS3.0의 기본 계층구조와는 다른  별도의 계층구조를 가지고 있으므로 경우에 따른 상속관계를 잘 따져보아야 한다. (무엇을 상속 받았는가에 따라 가능한 기능이 달라지므로 계층구조를 숙지해야할 필요가 있다.)
3.Papervision3D의 기본 요소(viewPort3D,  Sceane3D,  Camera3D, BasicRenderEngine )를 익히고 활용해본다.


1.Papervision3D 관련 class들을 다운
http://code.google.com/p/papervision3d/  를 방문하여 최신버젼을 다운받고 폴더 중 nochump 와 org을 flex내 현재 프로젝트의 
src폴더에 넣는다.




2. Papervision3D 계층구조 및 기본 요소




**Papervision3D의 기본 요소(viewPort3D,  Sceane3D,  Camera3D, BasicRenderEngine )
package
{
    import flash.display.Sprite;
    import flash.events.Event;
   
    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;

[SWF (width="640", height="480", frameRate="36", backgroundColor="0xEEEEEE")] //meta tag는 꼭 붙여줍니다.
    public class PV3Test1 extends Sprite
    {
        // 1. ViewPort
        private var viewPort:Viewport3D;
        // 2. Scene3D
        private var scene3D:Scene3D;
        // 3. Camera3D
        private var camera3D:Camera3D;
        // 4. BasicRenderEngine
        private var randerEngine:BasicRenderEngine;

        //3D Object
        private var plan:Plane;
       
        public function PV3Test1()
        {
            super();
            //1.ViewPort 만들고 화면에 붙이기
            this.viewPort= new Viewport3D();
            this.addChild(this.viewPort);  //눈에 보이는 것이므로 addChild
            //2.Scene3D 만들기
            this.scene3D= new Scene3D();
            //3.Camera3D 만들기
            this.camera3D= new Camera3D();
            this.camera3D.zoom=40;
            this.camera3D.moveBackward(500);
            //4.RanderEngine 만들기
            this.randerEngine= new BasicRenderEngine();

            //3D Object 만들기
            this.plan= new Plane();
            this.scene3D.addChild(this.plan); //눈에 보이는 것이므로 addChild
           
            this.addEventListener(Event.ENTER_FRAME, onEnter);
        }
         private function onEnter(e:Event):void
         {
             this.plan.rotationY++;
             this.randerEngine.renderScene(this.scene3D, this.camera3D, this.viewPort );
         }
     
    }//class
}//package

위의 코드는 PV3D의 기본 틀이다. 자 이제부터는 위의 기본 요소들을 하나씩 짚어보면서 Papervision3D의 상속관계를 알아본다.

!!!!!상속받은 class로 직접 이동하는 방법..
ctrl 을 누르고 원하는 class 이름 위에 커서를 올리면 이름에 underline이 생깁니다. 그 상태에서 class 이름을 클릭하면 곧바로 해당 class 로 이동하게 됩니다. (mac은 사과를 누르세요~) 이러한 방법으로 잘 모르는 class일지라도 상속관계를 찾아들어가 유추할 수 있는 것입니다.


1. ViewPort3D
*상속관계 ViewPort3D -> Sprite
(ViewPort는 Sprite 상속받았으므로 눈에 보이는 것임을 알 수 있다.)
ViewPort는 PV3D에 의해서 만들어지는 화면(이미지/영상)을 플래시에 연결시키는 ... 클래스이다.     
PV3D는 flash와는 전혀 다른 독자적인 화면랜더링 방식을 취하기 때문에 PV3D와 flash를 연결해주는 것이 필요하다.
그 역할을 ViewPort가 하는 것이다. { PV3D <--> flash }


2. Scene3D
*상속관계 Scene3D -> SceneObject3D -> DisplayObjectContainer3D -> EventDispatcher -> Object
(기본 상속관계 뼈대를 벗어나 자기만의 상속관계를 가진다는 것을 알 수 있다.)
Scene3D는 PV3D에서 stage와 같은 역할을 하는 객체이다. 그러므로  container 역할이 필요함(
DisplayObjectContainer3D 상속 )
여기서 DisplayObjectContainer3D 는 DisplayObject3D를 담을 수 있는 능력이 있어서
addChild( displayObject3D ) / removeChild /  numChildren 와 같은 기능이 가능하다.
( AS3  DisplayObject 기본 계층구조의 DisplayObjectContainer 참조)


3. Camera3D
*상속관계 Camera3D -> CameraObject3D -> DisplayObject3D -> DisplayObjectContainer3D -> EventDispatcher -> Object
( DisplayObjectContainer3D을 상속받았다는 것이 매우 중요하다.)
DisplayObject3D ::: 플래시의 Sprite 같은 객체로서
x, y, z, scaleX, scaleY, scaleZ, rotationX, rotationY, rotationZ, alpha, ... addChild/ removeChild 가 가능하다.
기존 flash는 고정 카메라였으나 PV3D에서는 다양한 각도와 움직임이 있기 때문에 상당히 복잡한 메카니즘을 가지게 된다.


4.BasicRenderEngine
*상속관계 BasicRenderEngine -> AbstractRenderEngine ->  EventDispatcher -> Object
플래쉬는 플래시 플레이어가 알아서 랜더링 해주지만 플래시 플레이어는 DisplayObject를 상속받은 객체만 랜더링 해준다...
PV3D는 DisplayObject를 상속받은게 아니라서.... 별로도 랜더링 해 줄수있는... flashPlayer 같은 객체가 필요하다...!!   
그 역할을 RenderEngine이 하는 것이다.


*** Plane (for 3D Object)
*상속관계 Plane -> TriangleMesh3D -> Vertices3D -> DisplayObject3D -> DisplayObjectContainer3D -> EventDispatcher -> Object
TriangleMesh3D :: 삼각형 면  <--- 안에 내용( material )을 채울 수 있다..
눈에 보이기 위한 최소면 단위는 삼각형이다. (3개 vertexs(점들)이 이루는 최소면 )  그래서 눈에 보이는 도형들은 모두 TriangleMesh3D 로 만든다. (점 두개가 모이면 선...선은 눈에 보이지 않는다...점 세개가 모이면 면이 된다. 그러므로 최소한의 면은 점 세개가 모여서 만들어진 트라이앵글이다.) 복잡한 도형의 경우 여러개의 triangle을 연결하여 만드는 것이다.



3.Papervision3D 활용

Basic 틀이 되는 코드 만들기
SuperClass: Sprite




기본이 되는 코드를 별도 class로 만들어 놓으면 기본 사항을 반복하여 코딩하지 않아도 되므로 유용하다.
기본 내용을 포함한 Base3D라는 class를 만들어 저장하고 이것을 Document class로 불러들여 (상속) 활용하도록 해보자.

먼저 flex내에서 Base3D class를 만들기 위한 as 파일을 생성한다.
해당 프로젝트 src폴더에서 오른쪽 마우스 클릭 > new > Actionscript class

팝업이 뜨면 package 이름/ 경로와 as. 파일의 name, 기본적으로 상속받을 Superclass를 지정해준다. (Superclass 시작은 대문자)
package 이름/경로는 본인이 원하는대로 적어주면 자동으로 생성된다.
여기서는 자신이 만든 class를 timo라는 폴더에 넣어두어 관리하고있다.




Package: timo.pv3d  SuperClass: Spriite


Base3D를 상속받은 여러가지 Document class를 만들어보기
.

Superclass: Sprte   (사각형 안을 채우기)



Superclass Base3D  (양쪽 면에 다른 색 입히기  )


Superclass Base3D  (회전 중심축 이동하기 )



Superclass: Base3D  (표면에 perlinNoise 를 입히기)


Superclass Base3D  (이미지 파일을 표면에 입히기)



Superclass Base3D  (지구 이미지를 입히고 지구를 도는 달을 만들어보기)



Superclass Base3D (특정 개체의 움직임을 절대 중심에 두고 카메라를 이동 시켜보기 )



Reference
http://blog.papervision3d.org/
http://code.google.com/p/papervision3d/ 
Posted by chacolina