はじめに

Three.js Advent Calendar 2019の 7 日目の記事です。
Three.js Meetup Tokyo #0で初LTしてきた勢いそのままに登録したものの何も思い浮かばずピンチな感じが満載ですが…

今回は意外と検索しても出てこないthree.js / editorを紹介できたらと思います。
思いっきりただのツール紹介になりますがご了承ください…

three.js / editor

Three.jsのオンラインエディターになります。

公式サイトにもリンク先があるのですが見逃したりしているのか、もしくはそもそも使ってる人がいないのかあまり話題になっていないような気がします（気のせい？）

こちらを開くとこのようにエディターの画面が表示されます。

基本操作

立方体を作成

では、簡単~~（手抜き）~~に立方体を作成していきます。
ツールバーの「Add」から作成するオブジェクトを選択します。
Boxを選択すると黒い立方体が表示されるかと思います。

この立方体は画面下部にあるTRANSLATE・ROTATE・SCALEを選択することでドラッグ＆ドロップによる移動・回転・サイズ変更することができます。
（画面右にあるOBJECTタブからも変更できます）

色を変更

画面右にあるMATERIALタブから立方体の色や質感などを編集することができます。
今回は簡単~~（手抜き）~~に赤にしてみましょう。
Emissiveを選択し、表示されたカラーピッカーから赤を選択すると立方体が赤くなると思います。

Export

作成したSceneやGeomeryはいくつかの形式でexportすることができます。

こちらでexportするとjsonがダウンロードされ、このエディタでimportすることもできますしthree.jsのObjectLoaderで読み込むことも可能です。（Export Geometry・Export Object・Export Scene）

// Export Sceneをexportしてダウンロードされたscene.jsonを読み込む
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color(0xaaaaaa));
document.getElementById("WebGL-output").appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000
);
camera.position.set(0, 5, 10);
camera.lookAt(0, 0, 0);

const loader = new THREE.ObjectLoader();
loader.load('scene.json', (obj: THREE.Object3D) => {
  const scene = obj as THREE.Scene;
  const render = () => {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
  };
  render();
});

Publishはhtmlやjsファイルの一式をzip形式でダウンロードすることができます。

Example

Exampleもいくつか用意されていますので、それを見て色々手を加えて遊んでみると楽しめるかもしれません。

PWA

個人的に「おっ！」と思ったのが、このエディターはPWA（Progressive Web App）になっているところです。
今回はThree.jsの記事ですのでPWAの説明は省略しますが、一言でいうとインストールできるWebアプリケーションです。

はじめてのプログレッシブウェブアプリ

Chromeでこのエディターを起動するとオムニバーにアイコンが現れインストールすることができます。

インストールするとデスクトップにアイコンが表示され起動できます。

おわりに

簡単~~（手抜き）~~な紹介だけとなってしまいましたが、今後も色々使ってみて何か良さ気なものがあったら紹介しようと思います。
（今回は入門の入門ということで…）

ツールをインストールなどせずに手軽に3DCGをやってみたい方やThree.jsに入門したいけれどまずはイメージを掴みたい方などにはお勧めできるかなと思いました。

また、UnityやBlenderなどをゴリゴリ使っている強々勢の方は興味があれば、issueやPRを出してみて機能改善していくのも良いかもしれませんね。