サイト上にSTLファイルを読み込んで、3Dデータを表示する(Three.js)

By | 2015年7月3日

今回、WEBサイト上に3Dデータを表示するサンプルを作成しました。
とある依頼があったので、どの程度できるのかを試すために作成してみました。

3Dデータは、STLファイルというものを利用する方式です。

Standard Triangulated Language(スタンダード・トライアンギュレイテッド・ランゲージ、略称:STL)は三次元形状を表現するデータを保存するファイルフォーマットのひとつとされる。ただし、この名称はほぼ日本国内でしか通用せず、一般的に用いられるSTL形式の正式名称は、(光造形法を意味する)英: Stereolithography である。

wikipedhiaより

WEBサイト上に表示する方法ですが、色々調べてみたところ、Three.jsが良さそうなので、これを採用しました。
Three.jsは以下のサイトからダウンロードできます。
http://mrdoob.github.io/three.js/

サイトにアクセスして、左側のメニューにあるdownloadボタンからダウンロードできます。

three.js

three.js


ダウンロードしたら、中身を解凍します。

今回利用したのは、以下の通りです。
three.js-master/build/three.min.js
 →Three.jsの本体

three.js-master/examples/js/loaders/STLLoader.js
 →STLファイルの読み込み用

three.js-master/examples/js/renderers/CanvasRenderer.js
 →Canvasを利用して表示する際に利用(WebGLでは不要)

three.js-master/examples/js/renderers/Projector.js
 →Canvasを利用して表示する際に利用(WebGLでは不要)

three.js-master/examples/js/controls/TrackballControls.js
 →マウスで3Dを操作するのに利用

STLファイルについては、以下のサイトから拝借してきました。
http://www.knowhave.com/gear/indexjp.php

さて、サンプルです。
サンプルは2パターン作成しました。
1つ目は、Canvasを利用して3Dを表示させるもの。
1つ目は、WebGLを利用して3Dを表示させるもの。

詳しいことは、サンプルのソースをみてください。
以下、簡単に説明です。若干、数学的計算が必要なことがありますが、お作法がわかればそこまで難しくないかも。

・Rendererを用意
 →描画する領域を用意します。

・Cameraを用意
 →3Dをみる位置というのでしょうか?視点の用意ですね。

・Sceneを用意
 →3D空間を用意。先ほど作成したカメラを配置。

・ライトを用意
 →3D空間に光源を付ける。今回は、ライトと自然光を使いました。

・3Dを用意
 →STLファイルを読み込み、メッシュをつけて3D空間に配置。

・コントロールを用意
 →コントロールを用意し、マウスで操作できるようにしました。

サンプルは以下の2つです。
・Cancasを使って描画
・WebGLを使って描画

使用した感じ、Canvasは重いので実用には耐えられないかも。WebGLは綺麗に描画されてサクサク動きました。
ただ、WebGLは使用環境が限られますね。
GoogleCrome、FireFox、Safariは動きましたが、IEはダメでした。
iPhone、iPadのSafariも動きませんでした。ただ、GoogleCromeは動きました。
Androidは、標準ブラウザは動きませんでしたが、GoogleCromeは動きました。
GoogleCromeが3Dに強いみたいですね。