Everyday Pieces ::
  • Webサービス
  • ブログパーツ
  1. ホーム
  2. プログラミング

three.jsで遊んでみる(44)

2020年12月18日 プログラミング MMD, three.js

 拙作の「MMD Viewer 改」において、
全画面表示のオン/オフの処理で問題があったので改善してみました。
というか、実はだいぶ以前から問題の件は把握しており、
そのうちにどうにかしようとか思っていたのですが、
激しくすっかり忘れていた次第です・・・(^_^;)

 さて、
ビューワー画面下部にある操作バーの右端に、
全画面表示の切り替えボタンがあります。
これを押すと全画面表示に切り替わり、
その状態で再度押すと元の状態に戻るようになっています。

 一方、
F11キーを押すことでも全画面表示することができます。
全画面状態でF11かEscキーを押すと元に戻るようになっています。

 で、
問題というのが、
F11キー押下で全画面表示した場合に、
下部にある操作バーのボタンを押しても元に戻らないことです。
というかうまく動かなくなってしまっています。
いまひとつ、よく分かっていないのですが、
JavaScriptから制御した場合と、
F11キー押下した場合では内部的に差異があるようです。
JavaScriptで全画面表示させた場合、
F11キー押下で元に戻ったりしますが、
F11キー押下による全画面表示は、
JavaScriptでは元に戻せない・・・なんでや(^_^;)。

 JavaScriptによる全画面表示の制御は
こちらに書いてあるようなAPIを使ってやります。
残念ながら現状ではブラウザ毎にAPIが異なってしまっています。
少なくとも現況のChromeにはW3C準拠なAPIが実装されていないようです。

 全画面表示の切り替えのコードは以下のような感じになります。

function hasFullscreenElement() {
	return document.fullscreenElement || document.webkitIsFullScreen || document.mozFullScreen;
}

function toggleFullscreen() {
	var el;
	if (hasFullscreenElement()) {
		if (document.cancelFullScreen) {
			document.cancelFullScreen();
		} else
		if (document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen();
		} else
		if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		}
	} else {
		el = document.documentElement;
		if (el.requestFullScreen) {
			el.requestFullScreen();
		} else
		if (el.webkitRequestFullScreen) {
			el.webkitRequestFullScreen();
		} else
		if (el.mozRequestFullScreen) {
			el.mozRequestFullScreen();
		}
	}
}

 上記のコードにあるように、
JavaScriptでやる場合はDOMのElementに対して要求をかけるような作りになっています。
そしてdocumentの特定プロパティの存在をチェックすることで、
全画面かどうかを判別できるようになっています。
ところがF11キー押下による全画面表示では、
hasFullscreenElement()の結果はundefinedとなってしまいます!
う~む。

 ところで、
全画面表示かどうかを判別するにはこちらに書いてあるような方法もあります。
具体的なコード例は以下のようになります。

var fullscreen = false;

window.onresize = function() {
	fullscreen = window.outerWidth === screen.width && window.outerHeight === screen.height;
};

 上記コードを実装すれば、
F11キー押下による全画面表示の判別は、
以下のようなコードでやれそうですね!

function isF11Fullscreen() {
	return fullscreen && !hasFullscreenElement();
}

 なので、
「MMD Viewer 改」においては、
F11キー押下によって全画面表示となっている場合は、
画面下部の操作バーにある全画面切り替えボタンは無効にするようにしました。
F11キー押下をシュミレートして切り替えるというアイデアもあったのですが、
JavaScriptでキーイベントを生成してディスパッチするというのは、
セキュリティ的にいかがなものかと思うので辞めました。
というかブラウザ側でブロックされそうな気がします(^_^;)

 ということで、
「MMD Viewer 改」を試すにはこちらからどうぞ。

関連記事
スマホとかの回転時にスケールをリセットする JavaScriptでスマホとかの回転を検知する three.jsで遊んでみる(46) パーリンノイズを試してみた(2) three.jsで遊んでみる(45) three.jsで遊んでみる(43) three.jsで遊んでみる(42) three.jsで遊んでみる(41) three.jsで遊んでみる(40) three.jsで遊んでみる(39) three.jsで遊んでみる(38) three.jsで遊んでみる(37) three.jsで遊んでみる(36) three.jsで遊んでみる(35) three.jsで遊んでみる(34) three.jsで遊んでみる(33) three.jsで遊んでみる(32) three.jsで遊んでみる(31) three.jsで遊んでみる(30) three.jsで遊んでみる(29) three.jsで遊んでみる(28) three.jsで遊んでみる(27) three.jsで遊んでみる(26) three.jsで遊んでみる(25) three.jsで遊んでみる(24) three.jsで遊んでみる(23) three.jsで遊んでみる(22) three.jsで遊んでみる(21) three.jsで遊んでみる(20) three.jsで遊んでみる(19) three.jsで遊んでみる(18) three.jsで遊んでみる(17) three.jsで遊んでみる(16) three.jsで遊んでみる(15) three.jsで遊んでみる(14) three.jsで遊んでみる(13) three.jsで遊んでみる(12) three.jsで遊んでみる(11) three.jsで遊んでみる(10) three.jsで遊んでみる(9) three.jsで遊んでみる(8) three.jsで遊んでみる(7) three.jsで遊んでみる(6) three.jsで遊んでみる(5) three.jsで遊んでみる(4) three.jsで遊んでみる(3) three.jsで遊んでみる(2) three.jsで遊んでみる

コメントする キャンセル

アドレスが公開されることはありません。が付いている欄は必須項目です。

投稿ナビゲーション

WordPressのLightboxなプラグインを変更
Win10の2004更新で「grub rescue>」(T_T)

カテゴリー

WordPress つぶやき トピック プログラミング

タグ

AS3 enchant.js FamilyTreeVis Flash Geolocation gif.js kinect Linux MMD MoneyTrackNote notifier.js OpenCV PDFカレンダー RISC-V three.js セキュリティ テーマ自作 ブログパーツ 動物 動画 麻雀

アーカイブ

© Everyday Pieces ::