ポインタロックについて（Pointer Lock）

・	ポインタロックについて
・	ポインタロックを開始する
・	ポインタロックを終了する
・	マウスの移動量を取得する

前のページに戻る

ポインタロックについて

■ Pointer Lock API について

HTML5 世代の機能です。

http://www.w3.org/TR/pointerlock/

■ポインタロックの機能

ポインタロックを使用すると、マウスカーソルが固定され、動かなくなります。

マウスイベントから、マウスの移動量を取得する事ができます。

これにより、モニタの画面端を超えるような移動を行ったとしても、正確なマウスの移動量を検出し続けることができます。

一人称視点の３Ｄゲームのマウス操作などに利用すると快適です。

■ポインタロックに対応しているか調べる

document.exitPointerLock が真であるか比較します。

ポインタロックに対応しているか調べる


// ------------------------------------------------------------
//ポインタロックに対応しているか調べる関数
// ------------------------------------------------------------
function DocumentIsSupportedPointerLock (document_obj){
	if(document_obj.exitPointerLock) return true;
	if(document_obj.webkitExitPointerLock) return true;
	if(document_obj.mozExitPointerLock) return true;
	return false;
}

// ------------------------------------------------------------
//ポインタロックに対応しているか調べる
// ------------------------------------------------------------
if(DocumentIsSupportedPointerLock(document)){

	alert("ポインタロックに対応している");

}else{

	alert("ポインタロックに対応していない");

}

上に戻る

ポインタロックを開始する

任意のエレメントからポインタロックを開始する

ポインタロック中のエレメントを取得する

■任意のエレメントからポインタロックを開始する

requestPointerLock() メソッドを使用します。

マウスやキーボードなどの押下操作中に限って、実行する事ができます。

Element.requestPointerLock( ) :Void

引数	Void	なし。
戻り値	Void	なし。

■任意のエレメントからポインタロックを開始する関数

エレメントからポインタロックを開始する関数


// ------------------------------------------------------------
// エレメントからポインタロックを開始する関数
// ------------------------------------------------------------
function ElementRequestPointerLock(element){
	var list = [
		"requestPointerLock",
		"webkitRequestPointerLock",
		"mozRequestPointerLock"
	];
	var i;
	var num = list.length;
	for(i=0;i < num;i++){
		if(element[list[i]]){
			element[list[i]]();
			return true;
		}
	}
	return false;
}

■ユーザーの許可について

ポインタロックを使用する場合、ユーザーの許可が必要です。

ユーザーが拒絶した場合、ロックは解除されます。

■フルスクリーン表示中の動作について

フルスクリーン表示中は、ポインタロックをいつでも開始できます。

マウスやキーボードなどの押下操作中に、開始する必要はありません。

■使用例

エレメントをクリックすると、ポインタロックを開始する


<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; border:10px solid #a44; background-color:#fcc;" ></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// エレメントからポインタロックを開始する関数
	// ------------------------------------------------------------
	function ElementRequestPointerLock(element){
		var list = [
			"requestPointerLock",
			"webkitRequestPointerLock",
			"mozRequestPointerLock"
		];
		var i;
		var num = list.length;
		for(i=0;i < num;i++){
			if(element[list[i]]){
				element[list[i]]();
				return true;
			}
		}
		return false;
	}


	// ------------------------------------------------------------
	// エレメントを取得
	// ------------------------------------------------------------
	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// エレメントをクリックすると実行されるイベント
	// ------------------------------------------------------------
	element.onclick = function (e){

		//ポインタロックを開始する
		ElementRequestPointerLock(element);

	};

    //-->
    </script>

  </body>
</html>

■ポインタロック中のエレメントを取得する

document.pointerLockElement プロパティを使用します。

■ポインタロック中のエレメントを取得する関数

ポインタロック中のエレメントを取得する関数


// ------------------------------------------------------------
// ポインタロック中のエレメントを取得する関数
// ------------------------------------------------------------
function DocumentGetPointerLockElement(document_obj){
	return (
		document_obj.pointerLockElement ||
		document_obj.webkitPointerLockElement ||
		document_obj.mozPointerLockElement ||
		null
	);
}

■取得例

ポインタロック中のエレメントを取得する


<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; border:10px solid #a44; background-color:#fcc;" ></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// エレメントからポインタロックを開始する関数
	// ------------------------------------------------------------
	function ElementRequestPointerLock(element){
		var list = [
			"requestPointerLock",
			"webkitRequestPointerLock",
			"mozRequestPointerLock"
		];
		var i;
		var num = list.length;
		for(i=0;i < num;i++){
			if(element[list[i]]){
				element[list[i]]();
				return true;
			}
		}
		return false;
	}

	// ------------------------------------------------------------
	// ポインタロック中のエレメントを取得する関数
	// ------------------------------------------------------------
	function DocumentGetPointerLockElement(document_obj){
		return (
			document_obj.pointerLockElement ||
			document_obj.webkitPointerLockElement ||
			document_obj.mozPointerLockElement ||
			null
		);
	}

	// ------------------------------------------------------------
	// エレメントを取得
	// ------------------------------------------------------------
	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// エレメントをクリックすると実行されるイベント
	// ------------------------------------------------------------
	element.onclick = function (e){

		// エレメントからポインタロックを開始する
		ElementRequestPointerLock(element);

	};

	// ------------------------------------------------------------
	// 一定の時間隔で実行する関数
	// ------------------------------------------------------------
	setInterval(function(){

		//ポインタロック中のエレメントを取得する
		var pointer_lock_element = DocumentGetPointerLockElement(document);

		// 出力テスト
		console.log(pointer_lock_element);

	},1000);

    //-->
    </script>

  </body>
</html>

上に戻る

ポインタロックを終了する

■ポインタロックを終了する

document.exitPointerLock() メソッドを使用します。

Document.exitPointerLock ( ) :Void

引数	Void	なし。
戻り値	Void	なし。

■ポインタロックを終了する関数

ポインタロックを終了する関数


// ------------------------------------------------------------
// ポインタロックを終了する関数
// ------------------------------------------------------------
function DocumentExitPointerLock(document_obj){
	var list = [
		"exitPointerLock",
		"webkitExitPointerLock",
		"mozExitPointerLock"
	];
	var i;
	var num = list.length;
	for(i=0;i < num;i++){
		if(document_obj[list[i]]){
			document_obj[list[i]]();
			return true;
		}
	}
	return false;
}

■使用例

ポインタロックを開始してから、10 秒後に終了する


<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; border:10px solid #a44; background-color:#fcc;" ></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// エレメントからポインタロックを開始する関数
	// ------------------------------------------------------------
	function ElementRequestPointerLock(element){
		var list = [
			"requestPointerLock",
			"webkitRequestPointerLock",
			"mozRequestPointerLock"
		];
		var i;
		var num = list.length;
		for(i=0;i < num;i++){
			if(element[list[i]]){
				element[list[i]]();
				return true;
			}
		}
		return false;
	}

	// ------------------------------------------------------------
	// ポインタロックを終了する関数
	// ------------------------------------------------------------
	function DocumentExitPointerLock(document_obj){
		var list = [
			"exitPointerLock",
			"webkitExitPointerLock",
			"mozExitPointerLock"
		];
		var i;
		var num = list.length;
		for(i=0;i < num;i++){
			if(document_obj[list[i]]){
				document_obj[list[i]]();
				return true;
			}
		}
		return false;
	}


	// ------------------------------------------------------------
	// エレメントを取得
	// ------------------------------------------------------------
	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// エレメントをクリックすると実行されるイベント
	// ------------------------------------------------------------
	element.onclick = function (e){

		// エレメントからポインタロックを開始する
		ElementRequestPointerLock(element);


		// 10 秒後に実行される関数
		setTimeout(function(){

			// ポインタロックを終了する
			DocumentExitPointerLock(document);

		},1000 * 10);
	};

    //-->
    </script>

  </body>
</html>

上に戻る

マウスの移動量を取得する

■マウスイベントから移動量を取得する

■マウスが移動したか監視する

onmousemove イベントを使用します。

■マウスイベントから移動量を取得する

Pointer Lock に対応している場合、MouseEvent が拡張されます。

以下のプロパティが、追加されています。

プロパティ名	型	説明
momentX	Number	水平方向のマウスの移動量を取得する。
momentY	Number	垂直方向のマウスの移動量を取得する。

■ MouseEvent オブジェクトから移動量を取得する関数

マウスポインタから移動量を取得する関数


// ------------------------------------------------------------
// マウスポインタから移動量を取得する関数
// ------------------------------------------------------------
function MouseEventGetMomentX (mouse_event){
	return (mouse_event.momentX || mouse_event.webkitMovementX || mouse_event.mozMovementX || 0);
}

function MouseEventGetMomentY (mouse_event){
	return (mouse_event.momentY || mouse_event.webkitMovementY || mouse_event.mozMovementY || 0);
}

■使用例

マウスの移動量を取得する


<html>
  <body>

    <div id="aaa" style="width:300px; height:200px; border:10px solid #a44; background-color:#fcc;" ></div>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// エレメントからポインタロックを開始する関数
	// ------------------------------------------------------------
	function ElementRequestPointerLock(element){
		var list = [
			"requestPointerLock",
			"webkitRequestPointerLock",
			"mozRequestPointerLock"
		];
		var i;
		var num = list.length;
		for(i=0;i < num;i++){
			if(element[list[i]]){
				element[list[i]]();
				return true;
			}
		}
		return false;
	}

	// ------------------------------------------------------------
	// マウスポインタから移動量を取得する関数
	// ------------------------------------------------------------
	function MouseEventGetMomentX (mouse_event){
		return (mouse_event.momentX || mouse_event.webkitMovementX || mouse_event.mozMovementX || 0);
	}

	function MouseEventGetMomentY (mouse_event){
		return (mouse_event.momentY || mouse_event.webkitMovementY || mouse_event.mozMovementY || 0);
	}


	// ------------------------------------------------------------
	// エレメントを取得
	// ------------------------------------------------------------
	// aaa という ID 属性のエレメントを取得する
	var element = document.getElementById("aaa");

	// ------------------------------------------------------------
	// マウスを移動すると実行されるイベント
	// ------------------------------------------------------------
	element.onmousemove = function (e){
		if(!e) e = window.event; // レガシー

		// マウスの移動量を取得する
		var moment_x = MouseEventGetMomentX(e);
		var moment_y = MouseEventGetMomentY(e);

		// 出力テスト
		console.log("momentX:" + moment_x + " momentY:" + moment_y);
	};

	// ------------------------------------------------------------
	// エレメントをクリックすると実行されるイベント
	// ------------------------------------------------------------
	element.onclick = function (e){

		// エレメントからポインタロックを開始する
		ElementRequestPointerLock(element);

	};

    //-->
    </script>

  </body>
</html>

上に戻る

前のページに戻る