今回、WEBサイト上に3Dデータを表示するサンプルを作成しました。
とある依頼があったので、どの程度できるのかを試すために作成してみました。
3Dデータは、STLファイルというものを利用する方式です。
Standard Triangulated Language（スタンダード・トライアンギュレイテッド・ランゲージ、略称:STL）は三次元形状を表現するデータを保存するファイルフォーマットのひとつとされる。ただし、この名称はほぼ日本国内でしか通用せず、一般的に用いられるSTL形式の正式名称は、(光造形法を意味する)英: Stereolithography である。
WEBサイト上に表示する方法ですが、色々調べてみたところ、Three.jsが良さそうなので、これを採用しました。
Three.jsは以下のサイトからダウンロードできます。
http://mrdoob.github.io/three.js/
サイトにアクセスして、左側のメニューにあるdownloadボタンからダウンロードできます。
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
さて、サンプルです。
サンプルは２パターン作成しました。
１つ目は、Canvasを利用して3Dを表示させるもの。
１つ目は、WebGLを利用して3Dを表示させるもの。
詳しいことは、サンプルのソースをみてください。
以下、簡単に説明です。若干、数学的計算が必要なことがありますが、お作法がわかればそこまで難しくないかも。
・Rendererを用意
→描画する領域を用意します。
・Cameraを用意
→3Dをみる位置というのでしょうか？視点の用意ですね。
・Sceneを用意
→3D空間を用意。先ほど作成したカメラを配置。
・ライトを用意
→3D空間に光源を付ける。今回は、ライトと自然光を使いました。
・3Dを用意
→STLファイルを読み込み、メッシュをつけて3D空間に配置。
・コントロールを用意
→コントロールを用意し、マウスで操作できるようにしました。
サンプルは以下の２つです。
・Cancasを使って描画
・WebGLを使って描画
使用した感じ、Canvasは重いので実用には耐えられないかも。WebGLは綺麗に描画されてサクサク動きました。
ただ、WebGLは使用環境が限られますね。
GoogleCrome、FireFox、Safariは動きましたが、IEはダメでした。
iPhone、iPadのSafariも動きませんでした。ただ、GoogleCromeは動きました。
Androidは、標準ブラウザは動きませんでしたが、GoogleCromeは動きました。
GoogleCromeが3Dに強いみたいですね。