【three.js】Webページに3Dモデルを表示する方法

Webページに3Dモデルをサクッと表示する方法を、実際のコードを含めて紹介します。
three.jsを使いますが、全機能使いこなさなくてもいいしまず試してみたい！　という方が対象です。

この記事でわかること

  • three.jsを(部分的に)使ってhtmlに3Dモデル(stlファイル)を表示したりぐりぐり回したりできるようにする方法
  • 3Dモデルの色やデフォルトの表示角度などを変える方法
  • つまり、以下を実現する方法

方法

まず、表示できることを確認する手順は以下です。

  1. GitHubにアップしているthree.jsのサンプルコードをダウンロードする
  2. run.batを実行する

run.batはローカルサーバーを立てて、そのページをChromeで開くコードです。
警告が出るかもですが、決して怪しいファイルではないので大丈夫です！

set port=8080
start cmd /c "python -m http.server %port%"
powershell -command "& {Start-Sleep -Seconds 0.2}"
start chrome.exe http://localhost:%port%/

うまく動いたら、コードの中身を見ていろいろ編集してみてください。
以上です！

サンプルコードの概要

一応少しだけ説明を書いておこうとおもいます。

ファイル構成

  • includes

    • three.js : 3Dモデル表示のスクリプトが入っている。three.jsの公式ページはこちら
    • display-3dmodel.js : three.jsの中身を呼び出すスクリプト
    • style.css : スタイルファイル

  • stl : 3D形状ファイルを入れる（デフォルトではサンプルデータが入っている）

  • index.html : 例のHTMLファイル

  • README.md : このファイル

  • run.bat : ローカルでindex.htmlを開くためのファイル

index.html

<body>の後ろの<script>におけるOBJ_INFOで、3D形状ファイルについての設定をしています。
設定内容は下記のコード内でコメントとして書いてある通りです。
色のバリエーションについては、display-3dmodel.jsのname2colorValue関数で指定している以下の色が使えます。
追加したい場合はそこに書き加えるか、あるいはもっと便利に改良しちゃってください！

  • 赤
  • ピンク
  • オレンジ
  • 黄
  • 緑
  • 青
  • 白
  • 灰
  • 黒

また、表示先は<div class="model-container" id="chain-1">のような形式で指定できます。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../includes/style.css">
    <title>display 3D model | hitbug</title>
</head>
<body>
    <div id="wrapper">
        <h1>3Dモデルの表示</h1>
        <div class="model-container" id="chain-1"></div>
        <div class="model-container" id="milk_crown-2"></div>
    </div>
</body>
    <script>
        const OBJ_INFO=[
            [
                '../stl/chain.stl',    /*  形状ファイルのパス          */
                ['chain-1'],           /*  表示先divのid              */
                [[0,-300,150]],        /*  視点の位置座標[x,y,z]       */
                [['orange', 'white']], /*  形状と背景の色              */
                [1, 10000]             /*  ズームイン/アウトの限界距離  */
            ],
            [
                '../stl/milk_crown.stl',
                ['milk_crown-2'],
                [[100,-300,150]],
                [['rainbow', 'white']],
                [1, 10000]
            ],
        ];
    </script>
    <script src="../includes/display-3dmodel.js" type="module"></script>
</html>

style.cssの中で本当に必要な部分

three.jsのサンプルコードのstyle.cssでは表示を整えるためのコードが少し入っているのですが、最小限にすると以下のようになります。

.model-container {
    justify-content: center;
    background-color: #f8f8f8;
    border: 1px solid #cccccc;
    border-radius: 5px;
    height: 600px;
    width: 1000px;
    margin-bottom: 20px;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

まとめ

Webページに3Dモデルをサクッと表示する方法を、実際のコードを含めて紹介しました。
まず試してみるのにはよいかと思います。
お役に立てばうれしいです！