Three.js Editor Extension for Google Chrome – Three.jsコンテンツを編集できるChrome機能拡張
WebGLはWebという冠はついているものの、HTMLやJavaScriptとは全く異なる言語となっています。そのため、素のWebGLを扱うのはとても面倒であり、ラッピングしたライブラリを使うことが多いようです。その中で最も有名なのはThree.jsでしょう。 Three.jsを使えばWebGLコンテンツを扱いやすくなるものの、調整する度にWebブラウザをリロードして確認という作業は面倒です。そこでChrome DevTools上でThree.jsコンテンツが編集できるThree.js Editor Extension for Google Chromeを使ってみましょう。
Three.js Editor Extension for Google Chromeの使い方
Three.js Editor Extension for Google ChromeはChromeストアでは公開されていないのでソースコードをダウンロードしてドラッグ&ドロップでインストールする必要があります。
インストールした状態でThree.jsコンテンツを表示すると、Chrome DevToolsでThree.js Editorというタブが開けるようになります。
そしてメッシュを選んでパラメータを変更し、その結果をリアルタイムに確認できます。
パラメータを変更すると表示が変わることで、どのパラメータがどこに使われているかが分かりやすくなります。
Three.js Editor Extension for Google Chromeは自分の作品の調整はもちろん、Three.jsを使ったWebGLコンテンツの作り方を学習する際にも役立つと思われます。リロードする手間がない分、さくさくと制作が進められるでしょう。
Three.js Editor Extension for Google ChromeはGoogle Chrome用、MIT Licenseのオープンソース・ソフトウェアです。