태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

안드로이드용 영어 어학기 Smart LC

스마트LC 소개 링크:
http://blog.ehxm.net/123

티스토어 링크:
http://bit.ly/awW3XW

"abobe"에 해당되는 글 1건

  1. 2009/06/01 FLEX + Papervision 3D 개발 환경 설정 2/2

FLEX + Papervision 3D 개발 환경 설정 2/2

Posted by EHXM. Posted in " Adobe Flash Platform/Tutorial "2009/06/01 04:08

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를 계속 사용할 것입니다.
// ActionScript file - pv3dBase.as

package ehxm{
	
	import flash.display.Sprite;
	import flash.events.Event;
		
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.cameras.*;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.render.BasicRenderEngine;
	
	public class pv3dBase extends Sprite {
		
		//pv3d를 위한 viewport, renderer, scene, camera를 정의		
		public var viewport:Viewport3D;
		public var renderer:BasicRenderEngine;
		public var scene:Scene3D; 
		public var camera:Camera3D;
		
		public function init(vpWidth:Number = 800, vpHeight:Number = 600):void {
			initPV3D(vpWidth, vpHeight); 
			init3d();
			init2d();
			initEvents();
		}
		
		protected function initPV3D(vpWidth:Number, vpHeight:Number):void {
			// viewport, renderer, scene, camera를 초기화
			
			if (vpWidth == 0) {
				viewport = new Viewport3D(stage.width, stage.height, true, true);
			}else{
				viewport = new Viewport3D(vpWidth, vpHeight, false, true);
			}
			addChild(viewport);
			
			renderer = new BasicRenderEngine();
			
			
			scene = new Scene3D();
			camera = new Camera3D();
		}
		
		protected function init3d():void {
			// models, materials, cameras 등을 초기화
		}
		
		protected function init2d():void {
		}
		
		//ENTER_FRAME 이벤트로, 프레임마다 처리해주는 함수
		protected function initEvents():void {
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		protected function processFrame():void {
			// Process any movement or animation here.
		}
		protected function onEnterFrame( ThisEvent:Event ):void {
			processFrame();
			renderer.renderScene(scene, camera, viewport);
		}
		
	}
	
}


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



10. tutorial.as에 pv3dBase를 상속받아서 다음과 같이 입체도형을 생성하고 회전시키는 샘플을 작성합니다.
// ActionScript file - tutorial.as
package ehxm{
	import mx.containers.Canvas;
	
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.objects.primitives.Cone;
	
	public class tutorial extends pv3dBase{
		public var cone:Cone;
		public var mat:ColorMaterial;
		
		//출력될 canvas를 매개변수로 받아서 canvas의 width, height로  viewport의 width, height설정
		public function tutorial(id:Canvas){
			init(id.width, id.height);
		}
		
		override protected function init3d():void{
			//다각뿔 생성, scene에 추가
			cone = new Cone(null);
			cone.scale = 1;
			camera.zoom=100;
			cone.pitch(-10);
			scene.addChild(cone);
		}
		override protected function processFrame():void{
			//회전
			cone.yaw(1);
		}
	}
}



papervision3d_tutorial.mxml
 소스 끝 (붙여넣으실때 이부분은 제거하여주세요)



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



예제결과


Papervision3D를 이용한 Flex 개발 환경 설정을 모두 마쳤습니다.

이제 Papervision3D의 class들을 이해하고, DirectX 3D, OpenGl등의 그래픽스의 기본이 있다면,
웹으로 그것을 구현하는 것은 어렵지 않을 것이라고 생각합니다.




관련 TAG로 검색해보세요. : , ,

¬ COMMENT [0]

여러분의 커뮤니케이션을 기다리고 있습니다.

  1. : 이름
  2. : 홈페이지

  1. : 비밀번호

[안드로이드] 영어 어학기 어플

영어 듣기 공부 많이들 하시나요? 따로 어학기를 장만하시기는 비용이 들죠? 스마트폰에서 MP3 파일을 터치를 이용해서 자유롭게 듣을 수 있는 영어 어학기 어플입니다. 동아리.....

2010년 대한민국 매쉬업 경진대회 후기, 아이디어 전쟁을 다녀와서..

아이디어의 전쟁의 현장이었던 2010년 대한민국 매쉬업 경진대회에 다녀왔습니다. 이번 대회는 지난 2월 6일(토요일), 삼성동 코엑스 컨퍼런스룸 401에서 열렸습니다. 이번.....

2010년 100가지가 넘는 안드로이드폰이 몰려온다!

2010년에 100가지가 넘는 안드로이드 폰 출시가 될 예정입니다. Mobile World Congress keynote에서 Google CEO Eric Schmidt의 연설.....

[안드로이드] 모토로이 체험할 수 있는 곳 (전국)

서울, 안양, 부산, 대구, 광주, 대전에 안드로이드 폰 체험 할 수 있는 곳이 있네요. 저는 코엑스 메가박스 입구에 있는 모토로라 체험 부스에서 우연히 모토로이를 만져보게 되.....

위 3D 갤러리는 http://www.fotoviewr.com/ 사이트의 Fotoviewr 입니다. Flex와 Papervision3D를 이용하여 위와같은 3D 갤러리를 구현해.....

무료 MP3 포멧 변경 툴 - Free MP3 WMA Converter
무료 MP3 포멧 변경 툴 - Free MP3 WMA Converter
무료 MP3 포멧 변경 툴 - Free MP3 WMA Converter
무료 MP3 포멧 변경 툴 - Free MP3 WMA Converter
언톡 2010년 신입생 모집 포스터
Android, LEGO NXT를 이용한 Sudoku Solving Robot 제작
Android, LEGO NXT를 이용한 Sudoku Solving Robot 제작
Android, LEGO NXT를 이용한 Sudoku Solving Robot 제작
Android, LEGO NXT를 이용한 Sudoku Solving Robot 제작

Category

전체보기 (108)
Anycall Dreamers (1)
안드로이드 (39)
Adobe Flash Platform (20)
Algorithm (0)
개발노트 (6)
경험 (33)

글 보관함

2011/02 (3)

2011/01 (1)

2010/09 (1)

2010/08 (1)

2010/07 (2)

Calendar

«   2012/02   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29      

믹시


Total : 115,867 Today : 223 Yesterday : 155