ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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のオープンソース・ソフトウェアです。

spite/ThreeJSEditorExtension

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2