ETERNITY DESIGN BLOG

PV3DのrotationとlocalRotationの違い

PV3DのrotationとlocalRotationの違い

Papervision3DのDisplayObject3Dクラスのメソッド、localRotation(X|Y|Z)とrotation{X|Y|Z)に関して、違いがわからなかったので調べてみました。
まず、サンプルのSWFを見ていただくとすぐにわかりますが、回転の方向が逆です。

文章での説明が難しく、localRotationのほうはいまいち掴み切れていないところもあるのですが、回転のベースとなる回転軸ごと回転されている感じ(わかるかな・・・)です。
なので、localRotation(X|Y|Z)の各プロパティに値を代入する順番が重要になります。
上のサンプルではX→Yですが、これを逆にすると同じ値を指定しても見え方が変わります。

また、lookAtを使うとlocalRotationの値は”0″になるようです。

rotation(X|Y|Z)は軸がぶれない!ので、各プロパティへの代入順序も関係ない。

個人的にはrotationのほうがわかりやすいです。どのような状況でlocalRotationと使い分けるのか浮かばないです。

以下、サンプルのコード。

テキストフィールドあたりが美しくない。

//AS3///////////////////////////////////////////////////////////////////////////
// 
// Copyright 2009 localRotationとrotationの違い
// 
////////////////////////////////////////////////////////////////////////////////

package {
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFieldType;
	import flash.events.Event;
	import flash.events.MouseEvent;

	import org.papervision3d.view.BasicView;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.WireframeMaterial;

	public class Main extends BasicView {
		private var p1:Plane;
		private var p2:Plane;
		private var wm:WireframeMaterial;
		private var cm:ColorMaterial;
		private var rotateText:TextField;
		private var textFormat:TextFormat;
		private var rotateXText:TextField;
		private var rotateYText:TextField;
		private var localXText:TextField;
		private var localYText:TextField;
		private var setRotationBtn:RotationBtn;


		public function Main() {
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;

			camera.z = -400;

			wm = new WireframeMaterial(0x96e6ff);
			wm.doubleSided = true;

			// Planeの配置
			p1 = new Plane(wm, 100, 100);
			p1.x = 100;
			//p1.rotationX = 60;
			p1.localRotationX = 45;
			p1.localRotationY = 45;
			trace(p1.rotationX);
			trace(p1.rotationY);
			scene.addChild(p1);

			wm = new WireframeMaterial(0xff96b3);
			wm.doubleSided = true;

			p2 = new Plane(wm, 100, 100);
			p2.x = -100;
			p2.rotationX = -45;
			p2.rotationY = -45;
			scene.addChild(p2);

			initInfoText();
			startRendering();
		}

		//---------------------------------------
		// 各種テキストの配置
		//---------------------------------------
		private function initInfoText() {
			var fmt:TextFormat = new TextFormat();
			fmt.color = 0xff96b3;
			fmt.size = 15;
			fmt.bold = true;

			var leftPlaneText = new TextField();
			leftPlaneText.defaultTextFormat = fmt;
			leftPlaneText.selectable = false;
			leftPlaneText.x = 155;
			leftPlaneText.y = 120;
			leftPlaneText.text = "rotation";
			addChild(leftPlaneText);
			
			fmt.color = 0x96e6ff;
			
			var rightPlaneText = new TextField();
			rightPlaneText.defaultTextFormat = fmt;
			rightPlaneText.selectable = false;
			rightPlaneText.x = 305;
			rightPlaneText.y = 120;
			rightPlaneText.text = "localRotation";
			addChild(rightPlaneText);

			rotateText = new TextField();
			rotateText.width = 200;
			textFormat = new TextFormat();
			textFormat.color = 0x999999;
			textFormat.size = 12;
			rotateText.defaultTextFormat = textFormat;
			rotateText.text = "rotationX : " + p1.rotationX + "nrotationY : " + p1.rotationY + "nrotationZ : " + p1.rotationZ;
			addChild(rotateText);

			fmt.color = 0xff96b3;
			fmt.size = 12;

			rotateXText = new TextField();
			rotateXText.border = true;
			rotateXText.width = 50;
			rotateXText.height = 20;
			rotateXText.type = TextFieldType.INPUT;
			rotateXText.defaultTextFormat = fmt;
			rotateXText.x = 150;
			rotateXText.y = 270;
			rotateXText.text = String(p2.rotationX);
			addChild(rotateXText);

			rotateYText = new TextField();
			rotateYText.border = true;
			rotateYText.width = 50;
			rotateYText.height = 20;
			rotateYText.type = TextFieldType.INPUT;
			rotateYText.defaultTextFormat = fmt;
			rotateYText.x = 150;
			rotateYText.y = 295;
			rotateYText.text = String(p2.rotationY);
			addChild(rotateYText);

			fmt.color = 0x96e6ff;
			fmt.size = 12;

			localXText = new TextField();
			localXText.border = true;
			localXText.width = 50;
			localXText.height = 20;
			localXText.type = TextFieldType.INPUT;
			localXText.defaultTextFormat = fmt;
			localXText.x = 320;
			localXText.y = 270;
			localXText.text = String(p1.localRotationX);
			addChild(localXText);

			localYText = new TextField();
			localYText.border = true;
			localYText.width = 50;
			localYText.height = 20;
			localYText.type = TextFieldType.INPUT;
			localYText.defaultTextFormat = fmt;
			localYText.x = 320;
			localYText.y = 295;
			localYText.text = String(p1.localRotationY);
			addChild(localYText);

			setRotationBtn = new RotationBtn();
			setRotationBtn.x = (550 - setRotationBtn.width) / 2;
			setRotationBtn.y = 350;
			setRotationBtn.buttonMode = true;
			setRotationBtn.addEventListener(MouseEvent.CLICK, setRotation);
			addChild(setRotationBtn);
		}

		private function setRotation(e:MouseEvent = null) {
			p1.localRotationX = Number(localXText.text);
			p1.localRotationY = Number(localYText.text);
			p1.localRotationZ = 0;
			p2.rotationX = Number(rotateXText.text);
			p2.rotationY = Number(rotateYText.text);

			rotateText.text = "rotationX : " + p1.rotationX + "nrotationY : " + p1.rotationY + "nrotationZ : " + p1.rotationZ;
		}

		protected override function onRenderTick(e:Event = null):void {
			super.onRenderTick(e);
		}
	}
}

RotationBtnクラスはライブラリにあるボタンのMCです。

ABOUT ME

名古屋を中心に、フリーランスでホームページ制作してます。 デザイン・サイト制作・WordPress案件・Flash制作、JavaScript(jQuery)と幅広く対応可能です。 案件のご依頼・ご相談はCONTACTよりご連絡ください。

CATEGORIES

ARCHIVES

TAGS