PaperVision3d - 2

Papervision 3D 의 Flex 개발을 위한 개발 환경 설정에 관한 내용입니다.
Papervision은 MIT에서 개발한 액션스크립트 엔진입니다.
MIT 라이센스를 가지며, 누구나 사용할 수 있는 오픈소스입니다.

개발 환경 설정 2/2 입니다.
이제 다운받은 Papervision 3D와 Flex Builder를 이용하여
Flex에서 Papervision을 사용하는 방법과 간단한 3D 예제를 구현 해 보겠습니다.

1. Flex Builder를 다음과 같이 실행합니다.

2. [File] - [New] - [Flex Project]를 선택하여, 새로운 Flex Project를 생성합니다.

Project 이름을 설정하고 [Finish]를 클릭하여 프로젝트 생성을 완료합니다.
-Project Name : papervison3d_tutorial
-Use default location
-Web application

3. Project가 완성되고 다음과 같이 src폴더에 Papervision3d_tutorial.mxml 파일이 생성된걸 알 수 있습니다.

4. 이제 프로젝트에 PV3D엔진을 추가하기 위해, 다운받은 com, fl, org 폴더를 선택하여 [Ctrl + C]로 복사합니다.

5. src폴더를 선택한 후 [Ctrl + V]로 붙여넣기하면 자동으로 다음과 같이 src에 추가됩니다.

이제 Flex + Papervision3D 개발을 위한 개발 환경설정은 완료되었습니다.
그럼 간단한 예제로 테스트 해보겠습니다.

6. 우선, Papervision 3D를 사용하려면, Sprite를 상속받는 클래스를 구현하여야 합니다. AS3 Class를 구현하기 위해 src폴더를 오른쪽 마우스 클릭한다음 [New] - [Folder]를 클릭하여 새 폴더를 만듭니다.

여기에선 폴더명을 ehxm로 만들었습니다.

7. ehxm 폴더를 오른쪽 마우스 클릭하여 [New]-[ActionScript File]로 액션스크립트 파일을 추가합니다.

파일이름을 pv3dBase로 설정합니다.

8. pv3dBase.as 에 Sprite를 상속받는 PV3D 기본 class를 정의, 구현합니다. Papervision3D를 사용하기 위해서 이제 이 기본 class를 계속 사용할 것입니다.

view source

print?

01.// ActionScript file - pv3dBase.as

02.

03.package ehxm{

04.

05.import flash.display.Sprite;

06.import flash.events.Event;

07.

08.import org.papervision3d.view.Viewport3D;

09.import org.papervision3d.cameras.*;

10.import org.papervision3d.scenes.Scene3D;

11.import org.papervision3d.render.BasicRenderEngine;

12.

13.public classpv3dBase extends Sprite {

14.

15.//pv3d를 위한 viewport, renderer, scene, camera를 정의

16.public varviewport:Viewport3D;

17.public varrenderer:BasicRenderEngine;

18.public varscene:Scene3D;

19.public varcamera:Camera3D;

20.

21.public functioninit(vpWidth:Number = 800, vpHeight:Number = 600):void {

22.initPV3D(vpWidth, vpHeight);

23.init3d();

24.init2d();

25.initEvents();

26.}

27.

28.protected function initPV3D(vpWidth:Number, vpHeight:Number):void {

29.// viewport, renderer, scene, camera를 초기화

30.

31.if (vpWidth == 0) {

32.viewport = newViewport3D(stage.width, stage.height, true, true);

33.}else{

34.viewport = newViewport3D(vpWidth, vpHeight, false, true);

35.}

36.addChild(viewport);

37.

38.renderer = newBasicRenderEngine();

39.

40.

41.scene = newScene3D();

42.camera = newCamera3D();

43.}

44.

45.protected function init3d():void {

46.// models, materials, cameras 등을 초기화

47.}

48.

49.protected function init2d():void {

50.}

51.

52.//ENTER_FRAME 이벤트로, 프레임마다 처리해주는 함수

53.protected function initEvents():void {

54.addEventListener(Event.ENTER_FRAME, onEnterFrame);

55.}

56.protected function processFrame():void {

57.// Process any movement or animation here.

58.}

59.protected function onEnterFrame( ThisEvent:Event ):void {

60.processFrame();

61.renderer.renderScene(scene, camera, viewport);

62.}

63.

64.}

65.

66.}

9. 기본 class구현이 완료되었으면, 이제 이 기본 class를 상속받아서 이 프로젝트에 맞게 변경해보도록 하겠습니다. 다시 새로 AS3 File을 만들고 이름을 tutorial로 지정합니다.

10. tutorial.as에 pv3dBase를 상속받아서 다음과 같이 입체도형을 생성하고 회전시키는 샘플을 작성합니다.

view source

print?

01.// ActionScript file - tutorial.as

02.package ehxm{

03.import mx.containers.Canvas;

04.

05.import org.papervision3d.materials.ColorMaterial;

06.import org.papervision3d.objects.primitives.Cone;

07.

08.public classtutorial extends pv3dBase{

09.public varcone:Cone;

10.public varmat:ColorMaterial;

11.

12.//출력될 canvas를 매개변수로 받아서 canvas의 width, height로 viewport의 width, height설정

13.public functiontutorial(id:Canvas){

14.init(id.width, id.height);

15.}

16.

17.override protected function init3d():void{

18.//다각뿔 생성, scene에 추가

19.cone = new Cone(null);

20.cone.scale = 1;

21.camera.zoom=100;

22.cone.pitch(-10);

23.scene.addChild(cone);

24.}

25.override protected function processFrame():void{

26.//회전

27.cone.yaw(1);

28.}

29.}

30.}

papervision3d_tutorial.mxml

view source

print?

01.<!-- 소스시작 (붙여넣으실때 이부분은 제거하여주세요)

02.<?xml version="1.0" encoding="utf-8"?>

03.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

04.layout="absolute" creationComplete="init();"width="300" height="300">

05.<mx:Script>

06.<![CDATA[

07.import ehxm.tutorial;

08.import mx.core.UIComponent;

09.

10.private function init():void{

11.//UIComponent 인스턴스에 class에 구현한 tutorial class를 추가하고

12.//이 UIComponent 인스턴스를 다시 출력할 canvas에 추가합니다.

13.var scene:tutorial = new tutorial(canvas_view);

14.var ui:UIComponent = new UIComponent();

15.ui.addChild(scene);

16.canvas_view.addChild(ui);

17.}

18.]]>

19.</mx:Script>

20.<mx:Canvasid="canvas_view" width="300" height="300">

21.</mx:Canvas>

22.

23.</mx:Application>

24.//--> 소스 끝 (붙여넣으실때 이부분은 제거하여주세요)

11. [Ctrl + F11]을 눌러 프로젝트를 build하고 실행해 봅니다.

예제결과

writeCode2(getEmbedCode('https://t1.daumcdn.net/cfile/tistory/1959A5154A22D53609','300','400','s0319773aaab36e98d85361f2ffa467941746','#FFFFFF','', undefined, 'transparent'), 's0319773aaab36e98d85361f2ffa467941746');

펌 : http://ehxm.tistory.com/21