Archive for the ‘Papervision3D’ Category

AS3.0, Papervision – Full screen mode

Sunday, April 5th, 2009

다양한 웹사이트와 레퍼런스를 참조한 결과 단순히 다음 코드 한줄로 될 줄 알았습니다만,
보안정책상 마우스나 키보드 이벤트를 받은 후처리로서의 동작으로만 가능하다고 합니다.

즉, 시작부분에 단순히 다음 코드를 삽입해서 자동으로 풀스크린으로 들어가도록 하는것은 동작하지 않는것 같습니다.
stage.displayState = StageDisplayState.FULL_SCREEN;

다음과 같이 메뉴나 버튼등을 활용하여 이벤트 처리시 풀스크린 진입을 가능하게 해주면 됩니다.
아래의 예는 플래시에서 우측클릭시 뜨는 팝업메뉴에 Go Full Screen / Exit full Screen 메뉴를 삽입한 경우입니다.

… 클래스의 constructor 부분에서 다음과 같이 built-in 메뉴를 풀스크린 관련 메뉴 아이템으로 대체, 이벤트 핸들러 선언.

var fullscreenCM:ContextMenu = new ContextMenu();</strong></span>
fullscreenCM.addEventListener(ContextMenuEvent.MENU_SELECT, menuHandler);
fullscreenCM.hideBuiltInItems();

var fs:ContextMenuItem = new ContextMenuItem("Go Full Screen" );
fs.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, goFullScreen);
fullscreenCM.customItems.push( fs );

var xfs:ContextMenuItem = new ContextMenuItem("Exit Full Screen");
xfs.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, exitFullScreen);
fullscreenCM.customItems.push( xfs );

contextMenu = fullscreenCM;
 

다음과 같이 이벤트 핸들러 구현.

// functions to enter and leave full screen mode
public function goFullScreen(event:ContextMenuEvent):void
{
stage.displayState = StageDisplayState.FULL_SCREEN;
}
public function exitFullScreen(event:ContextMenuEvent):void
{
stage.displayState = StageDisplayState.NORMAL;
}
 

중요한것은 이걸로 끝이 아니고 publish된 html 파일에서 allowFullScreen 내용들을 true로 수정해 주어야 합니다.
수정하지 않으면 다음과 같이 보안관련 에러가 발생합니다.

PV3D_FULLSCREEN

AC_FL_RunContent(
‘codebase’, ‘http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0′,

 ‘allowFullScreen’, ‘true’,

); //end AC code
</script>
<object classid="clsid:d27 …

<param name="
allowFullScreen" value="true" />
<param name="
movie" value="test.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />    <embed src="test.swf" quality="high" bgcolor="#ffffff" width="1280" height="760" name="test" align="middle" allowScriptAccess="sameDomain" <span style="font-weight: bold; color: #e31600;">allowFullScreen="true" </span>type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object></div>
</div>
 


Papervision3D – Skeleton / Template

Sunday, March 15th, 2009

Papervision3D 의 기본 뼈대가 되는 코드는 다음과 같습니다.

기본적으로 Sprite 클래스를 상속받고, Viewport3D, Scene3D, Camera3D, BasicRenderEngine 들을 생성/초기화 한 후,
Event.ENTER_FRAME 의 이벤트헨들러에서 계속적으로 renderScene 을 호출하여 3D 화면을 렌더링 합니다.
아래는 검은 배경에 와이어프레임형태의 구(Sphere)를 하나 그리는 내용입니다.

package
{
        import flash.display.Sprite;
        import flash.events.Event;
        import org.papervision3d.cameras.Camera3D;
        import org.papervision3d.objects.primitives.Sphere;
        import org.papervision3d.render.BasicRenderEngine;
        import org.papervision3d.scenes.Scene3D;
        import org.papervision3d.view.Viewport3D;

        [SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
        public class HelloPV3D extends Sprite
        {
                private var viewport:Viewport3D;
                private var scene:Scene3D;
                private var camera:Camera3D;
                private var renderer:BasicRenderEngine;
                public function HelloPV3D()
                {
                        viewport = new Viewport3D();
                        addChild(viewport);
                        scene = new Scene3D();
                        camera = new Camera3D();
                        renderer = new BasicRenderEngine();
                        var sphere:Sphere = new Sphere();
                        scene.addChild(sphere);
                        addEventListener(Event.ENTER_FRAME, enterFrameHandler);
                }

                private function enterFrameHandler(event:Event):void
                {
                        renderer.renderScene(scene, camera, viewport);
                }
        }
}

Viewport3D, Scene3D, Camera3D, BasicRenderEngine 이들이 핵심이라고 할 수 있는데, 이들의 정체를 Reference 에서 살펴보면 다음과 같습니다.

Viewport3D Inheritance flash.display.Sprite
Scene3D Inheritance SceneObject3D Inheritance DisplayObjectContainer3D Inheritance flash.events.EventDispatcher
Camera3D Inheritance CameraObject3D Inheritance DisplayObject3D Inheritance DisplayObjectContainer3D Inheritance flash.events.EventDispatcher
BasicRenderEngine Inheritance AbstractRenderEngine Inheritance flash.events.EventDispatcher

BasicRenderEngine links Viewport3Ds, Scene3D, and Camera3Ds together by gathering in all of their data, rendering the data, then calling the necessary functions to update from the rendered data

한편, 위와 같은 일련의 기본적인 초기화 코드를 구현해 놓은 클래스가 있는데, 바로 BasicView 입니다.
BasicView 를 사용하면 Viewport3D, Scene3D, Camera3D, BasicRenderEngine 초기화 과정을 거치지 않아도 됩니다.

package
{
        import org.papervision3d.objects.primitives.Sphere;
        import org.papervision3d.view.BasicView;

        [SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
        public class BasicViewTest extends BasicView
        {
                public function BasicViewTest()
                {
                        var sphere:Sphere = new Sphere();
                        scene.addChild(sphere);
                        startRendering();
                }

        }
}

이때 render.renderScene(scene, camera, viewport) 부분이 startRendering() 으로 바뀐 것을 볼 수 있습니다.
만약 매 프레임 렌더시에 무언가를 하려면 다음과 같이 BasicView 의 render 함수를 오버라이드해서 우리가 구현할 수 있습니다.

package
{
        import flash.events.Event;

        import org.papervision3d.objects.primitives.Sphere;
        import org.papervision3d.view.BasicView;

        [SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
        public class BasicViewTest extends BasicView
        {
                public function BasicViewTest()
                {
                        var sphere:Sphere = new Sphere();
                        scene.addChild(sphere);
                        startRendering();
                }

                override protected function onRenderTick(event:Event=null):void
                {
                        // 여기서 추가적인 무엇인가를 수행
                        renderer.renderScene(scene, camera, viewport);
                }

        }
}

onRenderTick 은 BasicView 클래스에 구현되어 있습니다만, 우리가 여기서 override 하여 우리만의 추가적인
기능을 부여할 수 있습니다.

이번엔 면(Plane)을 하나 만들어 빙글빙글 돌려 보겠습니다.

PV3D_Plane

package
{
        import flash.display.Sprite;
        import flash.events.Event;

        import org.papervision3d.cameras.Camera3D;
        import org.papervision3d.render.BasicRenderEngine;
        import org.papervision3d.scenes.Scene3D;
        import org.papervision3d.view.Viewport3D;

        import org.papervision3d.materials.ColorMaterial; // 면에 입힐 재질 라이브러리
        import org.papervision3d.objects.primitives.Plane; // 면을 위한 라이브러리

        [SWF(width="640", height="480", backgroundColor="#ffffff", frameRate="60")]
        public class HelloPV3D extends Sprite
        {
                private var viewport:Viewport3D;
                private var scene:Scene3D;
                private var camera:Camera3D;
                private var renderer:BasicRenderEngine;
                public var plane:Plane; // Plane(면) 클래스의 인스턴스변수 선언

                public function HelloPV3D()
                {
                        viewport = new Viewport3D();
                        addChild(viewport);

                        scene = new Scene3D();
                        camera = new Camera3D();
                        renderer = new BasicRenderEngine();

                        var material:ColorMaterial = new ColorMaterial(0×33ddff, 1); //재질
                        material.doubleSided = true;

                        plane = new Plane(material, 300, 300, 1, 1); //면
                        scene.addChild(plane); // 씬에 면을 추가

                        addEventListener(Event.ENTER_FRAME, enterFrameHandler);
                }

                private function enterFrameHandler(event:Event):void
                {
                        plane.yaw(2); // 면을 2도씩 Y축을 기준으로돌린다
                        renderer.renderScene(scene, camera, viewport);
                }

        }
}

위에서 x, y, z 축의 회전은 각각 pitch, yaw, roll 을 사용합니다. 즉,
plane.pitch(2);
plane.yaw(2);
plane.roll(2);
이렇게 다 써주면 x,y,z 축 모두를 기준으로 빙글빙글 돌겠죠.


ActionScript 3.0 – Tweener class

Tuesday, March 10th, 2009

타임라인 기반 플래시에서 easing 이라고 불렸던, 기타 애프터이펙트나 3D 프로그램들의 애니메이션 그래프에서 볼 수 있는
부드러운 가/감속 기능을 구현해 놓은 클래스 입니다. 어떤 인터렉션 작업을 하던 필수적으로 사용되므로 꼭 알아놓아야 할
클래스 중에 하나입니다.

기본적으로는 Adobe 에서 구현해놓은 Tween 클래스가 이미 flash 에 내장이 되어있습니다만, 퍼포먼스를 이보다 개선한 클래스들이 몇 있습니다. 그중 널리 사용되는 유명한 클래스가 caurina tweener 이고, 다른하나는 tweenmax 입니다.

Caurina Tweener
http://code.google.com/p/tweener/

TweenMax
http://blog.greensock.com/tweenmaxas3/