three.jsでjson形式のモデルを表示してみる

2016.02.03

WebGLを使用しているサイトも増え、3D表現を勉強されているWeb技術者も多いかと思います。
私もthree.jsで色々と試行錯誤しています。

今回は外部3Dモデルファイルを読み込み、表示してみたいと思います。

ちなみに今回説明する各バージョンは以下の通りです。

blender : 2.76
three.js : r73

3Dモデルを入手する

blendファイル→blenderにてjsonファイル書き出し→three.jsでjsonファイル読み込み・表示

three.jsで表示させたい3Dモデルを一から作るのは大変なので今回はフリー素材を使います。
ちなみに3Dデータには色々な形式がありますが、three.jsでは今の所blenderと言うフリーの3DCG制作ソフトを使用し、[.json]形式で書き出すのがベターとされています。
なので、まずはblenderで使える[.blend]形式の素材を探します。

それでは早速、TF3DMという3Dモデルを販売・配布しているサイトより、[.blend]形式のモデルを適当（Commercial use License）にダウンロードしてきます。

blenderでエクスポートしてみる – インストール編 –

まずはblenderをインストールしましょう。
blenderにはjsonエクスポーターの機能が付いていないのでプラグインが必要です。
プラグインはthree.jsをダウンロードすると付いてきます。

~~※chromeのコンソールで”Loader.createMaterial: Unsupported colorAmbient…”などとエラーが出る方は下記参考~~
~~ただ、今現在のバージョンはblenderプラグインの不具合がある様なので、下記のdevブランチより修正されているものを使った方が良さそうです。~~

~~https://github.com/mrdoob/three.js/tree/dev~~

r74からは上記のエラーは出なくなったようです。

ダウンロードしたthree.jsフォルダ内[/utils/exporters/blender/addons/]のio_threeフォルダが今回使うプラグインです。
下記の場所へフォルダごとコピーして置いて下さい。

[Windows] C:\Program Files\Blender Foundation\Blender\2.7X\scripts\addons
[OSX] /Users/(myuser)/Library/Application Support/Blender/2.7X/scripts/addons

blenderでエクスポートしてみる – 設定編 –

それではダウンロードした3Dモデル素材をblenderで開きましょう。

まずは使いやすくするため日本語化します。
メニューから[File]-[User Preferences]を選択し、[System]タブの右下にあるInternationalFontsにチェック。
言語を日本語にし、インターフェースとツールチップのボタンを選択します。

先ほど配置したプラグインを有効化します。
メニューから[ファイル]-[ユーザー設定]-[上タブ:アドオン]-[左カテゴリー:インポート/エクスポート]を選択し、Three.js Formatをチェック。

そしていよいよエクスポートします。

メニューから[ファイル]-[エクスポート]-[Three.js(.json)]を選択します。

エクスポート設定は以下のような感じ。デフォルト設定にFace Materialsを足します。

そして[Export THREE]でjsonファイルをエクスポート。

※モデルによっては[A]にて全選択をし[Ctrl + J]で結合をした方がいい場合があります。

three.jsで表示させてみる

ではいよいよthree.jsにて先ほど書き出したjsonファイルをブラウザに表示させてみます。

ダウンロードしたthree.jsフォルダの中で使うファイルは以下の2つですので適所に配置してください。

build/three.min.js
examples/js/controls/OrbitControls.js

ソースコードは以下のような感じです。
特に変わったことはしていないのですが、ハイライト箇所でjsonファイルを読み込むnew THREE.JSONLoader関数を使用しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>3D Object Load Tool</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="script/three.min.js"></script>
  <script src="script/OrbitControls.js"></script>
  <script>
  var canW = 680; //canvas横:任意値 
  var canH = 400; //canvas縦:任意値 
  var modelPath = "./model/fluzeug.json";//書き出したjsonファイル 　
  var scene, camera, renderer;　
  function init() {　　
    var container = document.getElementById('canvas-area');　　
    scene = new THREE.Scene();

    // CAMERA:透視投影 　　
    camera = new THREE.PerspectiveCamera(45, canW / canH, 1, 1000);　　
    scene.add(camera);　　
    camera.position.set(40, 20, 20);

    //レンダラー　　
    renderer = new THREE.WebGLRenderer({
      antialias: true
    });　　
    renderer.setSize(canW, canH);　
    container.appendChild(renderer.domElement);

    //ライト 　　
    var directionalLight = new THREE.DirectionalLight(0xFFFFCD, 0.8);　　
    directionalLight.position.set(0, 60, 200);　　
    var ambientLight = new THREE.AmbientLight(0xFFFFCD);　　
    scene.add(directionalLight, ambientLight);

    //オブジェクト　
    loader = new THREE.JSONLoader();　　
    loader.load(modelPath, function(geo, mat) {　　　
      var faceMat = new THREE.MeshFaceMaterial(mat);　　　
      var model = new THREE.Mesh(geo, faceMat);　　　
      model.position.set(0, -5, 0);　　　
      model.scale.set(10, 10, 10);　　　
      scene.add(model);　　　
      rendering();　　
    });　　

    //コントローラー 
    controls = new THREE.OrbitControls(camera, renderer.domElement);　
    controls.maxDistance = 1000;　　
    controls.maxPolarAngle = Math.PI * 0.48;

    //軸表示 　　
    var axis = new THREE.AxisHelper(1000);
    scene.add(axis);　
  }

  function rendering() {　
    requestAnimationFrame(rendering, renderer.domElement);　
    renderer.render(scene, camera);
  }
  $(function() {　
    init();
  });
  </script>
</head>
<body>
  <div id="wrapper">
    <div id="canvas-area">
      <!--canvas表示域-->
    </div>
  </div>
</body>
</html>