EHXM

[도:트]'s Dev Log

DID YOU KNOW...

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

Papervision 3D Tutorial 6 : Dynamic Image Material

Posted by EHXM. Posted in " Adobe Flash Platform/Tutorial "2009/06/10 21:57

Papervision 3D Tutorial 6 : Dynamic Image Material

Image를 URL을 통해 동적으로 불러온 후 material로 설정 해 보겠습니다.

AC3에서 동적으로 이미지를 불러오는 경우, Loader클래스를 사용합니다. ( flash.display.Loader )
material 생성자에 URL을 바로 적어서 생성할 수 있지만, 웹에서 외부 이미지를 사용할때는 그 이미지를 코드에서 사용한 시점과 다운받는 시점이 차이가 나기때문에 그 이미지를 확실히 load했을때 사용할 수 있는 방법이 필요하므로, Loader 클래스를 이용하여 이미지를 로드 할 수 있다.

Loader를 사용하기 위해서, Loader 변수를 추가하고, Loader에 이벤트를 등록하고, 이벤트를 처리하여 material로 설정하는 과정으로 이용하면 된다.
Pv3dBase 클래스를 상속 한 후 다음과 같이 변수를 추가한다.

	public class tutorial extends pv3dBase{
		
		private var plane:DisplayObject3D;
		private var cone:Cone;
		private var mat1:BitmapMaterial;
		private var loader:Loader;
		private var statText:TextField

생성자에서 Loader를 생성

		public function tutorial(_width:Number, _height:Number){
			loader = new Loader();
			init(_width, _height);
		}

init3d()에서 3D 기본 세팅

		override protected function init3d():void{
			mat1 = new BitmapFileMaterial("images/ehxm.jpg");
			mat1.doubleSided = true;
			mat1.smooth = true;
			
			plane = new Plane(null, 300, 200, 10, 10);
			cone = new Cone(null);
			
			plane.material = mat1;
			
			cone.material = mat1;
			
			cone.x = 150;
			cone.pitch(-30);
			
			plane.x = -150;
			plane.z = 100;
			
			camera.x=0;
			camera.y=0;
			camera.z=-1000;
			camera.zoom=100;
			
			scene.addChild(plane);
			scene.addChild(cone);
		}

init2d()에서 이미지를 불러오는 상태를 출력하는 텍스트 필드를 추가

		override protected function init2d():void{
			statText = new TextField()
			addChild(statText);
		}

initEvent()함수에서 Loader에 관한 이벤트를 등록한 후 핸들러 처리
ProgressEvent.PROGRESS는 Loader에서 이미지를 불러오는 이벤트,
Event.COMPLETE는 load가 완료되었을때의 이벤트

		override protected function initEvents():void{
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
			loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, handleProgress);
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleComplete);
		}

불러오는 과정을 %로 나타내기 위해 다음과 같이 사용하고 텍스트 필드로 출력

		private function handleProgress(event:ProgressEvent):void{
			var percent:Number = event.bytesLoaded / event.bytesTotal * 100;
			statText.text = "Loading . . " + percent.toString();
		}

load가 완료되면 불러온 이미지를 loader.content로 접근할 수 있으며, 여기서는 이미지 파일이므로 Bitmap으로 캐스팅 해준다. 불러온 Bitmap으로 Material 생성 후 Object에 적용

		private function handleComplete(event:Event):void{
			statText.text = "Complete";
			var _bitmap:Bitmap = Bitmap(loader.content);
			mat1 = new BitmapMaterial(_bitmap.bitmapData);
			mat1.doubleSided = true;
			
			plane.material = mat1;
			cone.material = mat1;
		}

이제 loader.load(new URLRequest("이미지주소")); 를 실행하면 이벤트가 실행되고 이미지를 로드할 수 있다.
클래스에 이미지 주소를 받는 메소드를 추가한다. 이 메소드는 Flex에서 버튼을 클릭할때 실행

		public function setImg(imgURL:String):void{
			loader.load(new URLRequest(imgURL));
		}

전체 tutorial 클래스 소스

// ActionScript file
package ehxm{
	import flash.display.Bitmap;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.events.ProgressEvent;
	import flash.filters.BitmapFilter;
	import flash.net.URLRequest;
	import flash.text.*;
	
	import org.papervision3d.materials.BitmapFileMaterial;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Cone;
	import org.papervision3d.objects.primitives.Plane;
	
	public class tutorial extends pv3dBase{
		
		private var plane:DisplayObject3D;
		private var cone:Cone;
		private var mat1:BitmapMaterial;
		private var loader:Loader;
		private var statText:TextField
		
		//출력될 canvas를 매개변수로 받아서 canvas의 width, height로  viewport의 width, height설정
		public function tutorial(_width:Number, _height:Number){
			loader = new Loader();
			init(_width, _height);
		}
		override protected function initEvents():void{
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
			loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, 

handleProgress);
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleComplete);
		}
		private function handleProgress(event:ProgressEvent):void{
			var percent:Number = event.bytesLoaded / event.bytesTotal * 100;
			statText.text = "Loading . . " + percent.toString();
		}
		private function handleComplete(event:Event):void{
			statText.text = "Complete";
			var _bitmap:Bitmap = Bitmap(loader.content);
			mat1 = new BitmapMaterial(_bitmap.bitmapData);
			mat1.doubleSided = true;
			
			plane.material = mat1;
			cone.material = mat1;
		}
		public function setImg(imgURL:String):void{
			loader.load(new URLRequest(imgURL));
		}
		override protected function init3d():void{
			mat1 = new BitmapFileMaterial("images/ehxm.jpg");
			mat1.doubleSided = true;
			mat1.smooth = true;
			
			plane = new Plane(null, 300, 200, 10, 10);
			cone = new Cone(null);
			
			plane.material = mat1;
			
			cone.material = mat1;
			
			cone.x = 150;
			cone.pitch(-30);
			
			plane.x = -150;
			plane.z = 100;
			
			camera.x=0;
			camera.y=0;
			camera.z=-1000;
			camera.zoom=100;
			
			scene.addChild(plane);
			scene.addChild(cone);
		}
		override protected function init2d():void{
			statText = new TextField()
			addChild(statText);
		}
		override protected function processFrame():void{
			cone.yaw(1);
			plane.rotationY = (stage.width/2 - mouseX)/10;
			plane.rotationX = (stage.height/2 - mouseY)/10;
		}
	}
}

mxml파일에 Canvas, Button, TextInput을 추가해서 디자인을 다음과 같이 만들고, 버튼클릭시에 setImg 메소드를 호출