Three.jsで外部ファイルから3Dモデルを読み込む【ソースコード付き】

スポンサーリンク
Three.js

悩む人
悩む人

Three.js で外部から3Dモデルを読み込んで表示したい

こういったお悩みを解決します。

デフォルトで入っているメッシュばかりだと開発コンテンツがなんとなく味気ない感じになりますよね。

3DCGを用いたブラウザコンテンツは、やはり、自分が作ったモデルや公開されているフリーモデルを使うことでかなり豪華に見えると思います。

今回はそれらを読みこんで実際に表示するところまで解説いたします。もちろん、ソースコード付きです。

例として、objファイル、mtlファイルを扱うOBJLoaderとMTLLoaderを使用します。

当記事を読むと、

  • 外部ファイルから3Dモデルを読み込むことができる
  • OBJLoaderの使い方が分かる
  • MTLLoaderの使い方が分かる
スポンサーリンク

.objファイルとは

まず、そもそも.objファイルとは何なのでしょうか。

簡単に言うと、3Dオブジェクトの形状を定義しているファイルになります。

材質(マテリアル)情報は保持することができません。

ですが、外部のmtlファイルを参照することはできます。

中身はこんな感じです。

正直、中身についてはそこまで知る必要はないですが、詳しく知りたい方はWikipediaを参照してください。

Wavefront .objファイル - Wikipedia
スポンサーリンク

.mtlファイルとは

こちらはobjファイルとは異なり、材質情報を定義しているファイルになります。

複数のマテリアルを定義することができ、それぞれに名前を付けます。

その名付けたマテリアル名をobjファイルで指定してあげることで適用することができます。

フリーでゲットできるファイルは、たいていここまで準備されているので、自分で手を加える必要はないです。

mtlファイルの中身はこんな感じです。

newmtl の後に書いてあるのがマテリアル名ですね。

一つ一つに対して材質情報を定義しています。

3Dモデルの読み込み

実際に3Dモデルを読み込んでブラウザに表示してみましょう。

まずは、ダウンロードサイトからobjファイルとmtlファイルをダウンロードします。

今回は例としてhttps://free3d.com/ja/3d-model/hp-laptop-high-poly–29640.htmlからダウンロードします。

ダウンロードボタンをクリックし、利用可能なファイルの中のzipファイルを選択します。

するとダウンロードが開始されます。

自身の作業用フォルダ配下に展開してください。

私の場合はこんな感じです。

HP_Laptop_High_Polyの中がこんな感じになっていたらOKです。

では、ここから具体的なソースコードの話になります。

以下がソースコードです。

<!DOCTYPE html>
<html>
  <head>
    <title>three.js Sample</title>
    <meta charset="utf-8">
    <script src="./three.js-master/build/three.min.js"></script><!--three.jsライブラリの読み込み-->
    <script src="./three.js-master/examples/js/loaders/OBJLoader.js"></script><!--OBJLoaderの読み込み-->
    <script src="./three.js-master/examples/js/loaders/MTLLoader.js"></script><!--MTLLoaderの読み込み-->
  </head>
  <body>
    <script>
      const scene = new THREE.Scene();  //シーンを作成
      const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);  //カメラを作成
      const ambientLight = new THREE.AmbientLight(0xffffff);
      const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
      const renderer = new THREE.WebGLRenderer(); //レンダラーを作成
      init();
      objMtlLoad('./HP_Laptop_High_Poly/Laptop_High-Polay_HP_BI_2_obj.obj', './HP_Laptop_High_Poly/Laptop_High-Polay_HP_BI_2_obj.mtl'); //シーンに追加
      animate();

      function init(){    //初期化用関数
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.BasicShadowMap;
        document.body.appendChild(renderer.domElement); //canvas要素をbodyタグに追加
        camera.position.set(0, 1, 10);
        scene.add(ambientLight);
        scene.add(directionalLight);
      }

      function animate(){
        renderer.render(scene, camera);
        requestAnimationFrame(animate); //毎フレーム呼び出すことで描画
      }

      function objMtlLoad(objFileName, mtlFileName){  //obj,mtlファイルを読み込んでシーンに追加する関数
        const mtlLoader = new THREE.MTLLoader();
        mtlLoader.load(mtlFileName, materials => {  //mtlファイルの読み込み
          const objLoader = new THREE.OBJLoader();
          materials.preload();
          objLoader.setMaterials(materials);  //objLoaderにマテリアルをセット
          objLoader.load(objFileName, object => { //objファイルの読み込み
            scene.add(object);  //シーンに追加
          });
        });
      }
    </script>
  </body>
</html>

まずはじめに、three.min.jsだけでなく、OBJLoaderおよびMTLLoaderを使用するため、それらのライブラリを読み込みます。

そして今回は、objMtlLoadというobjファイルとmtlファイルのパスを受け取り、モデルを読み込んでシーンに追加する関数を用意しました。

こうすることで、引数を変えるだけでいろいろな3Dモデルを読み込むことができるので便利ですね。

各行で何をしているかはソースコード内のコメントを参考にしていただけたらと思います。

そんなに難しいことはしていません。

以下の画像のように、ノートPCが表示されたら読み込み完了です。お疲れさまでした。

※表示されない方

ローカルファイルから読み込む場合でも、サーバを立てて通信をしないとエラーが発生する可能性があります。

以下の記事でローカルサーバを立てる方法を解説していますので参考にしてみてください。

Visual Studio Codeを使用します。

ボタン1つでローカルサーバを立てる【Visual Studio Code】
Visual Studio Codeでボタン1つで簡単にローカルサーバを立ち上げる方法をご紹介します。

まとめ

いかがでしたでしょうか。

今回は、

  • objファイル、mtlファイルの解説
  • OBJLoader, MTLLoaderの使い方
  • サンプルの作成

を行いました。

当記事を参考にいろいろなモデルを読み込んでみてください。

今回のobjMtlLoadの処理ではシーンに追加しただけですが、もっと複雑な処理を読み込み時にさせることはできます。

positionやrotation、scaleを引数として同時に渡して読み込み時にセットするとか。

以上です。

コメント

タイトルとURLをコピーしました