three.js / editor

Posted at 2019-12-07

はじめに

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();
});