Three.js 　 STLLoader（3Dモデル読み込み）

今回は、Three.jsの「STLLoader」について書きます。

STLLoaderは、stl（3DCGファイルの方）をThree.jsに読み込む事ができる関数です。
ちなみに、stlは、三次元形状を表現するデータを保存するファイルフォーマットのひとつです。
詳しくは、ウィキペディアを見てください（笑）

STLLoaderを使って、3Dモデルを読み込むと、こんな感じに表示されます。
f:id:gupuru:20131225212754p:plain
横です。
f:id:gupuru:20131225212813p:plain

STLLoaderを使うには、「STLLoader.js」を読み込む必要があります。
STLLoader.jsのファイルは、Three.jsダウンロードフォルダ内の
examples/js//loaders/STLLoader.js
にあります。

実際のコードを書きます。
まずはじめに、Three.jsのファイル読み込み後に、

<script src="STLLoader.js"></script>

を追加します。
これで、STLLoader関数が使えます。

次に、STLLoader関数を使い、stlファイルを読み込むコードです。

var mesh;

//ここにstlファイルを記述
var model_load="～.stl";

var loader = new THREE.STLLoader();
    loader.addEventListener( 'load', function ( event ) {
    var geometry = event.content;
    var material = new THREE.MeshLambertMaterial( { ambient: 0xff5533, color: 0xff5533} );
    mesh = new THREE.Mesh( geometry, material );                  
                               
    scene.add( mesh );          
 } );
loader.load( model_load );

コレで終わりです。実行すると、こんな感じのが表示されると思います。
f:id:gupuru:20131225212754p:plain

さらに、位置や大きさを変更する場合は、こうします。

var mesh;
var model_load="～.stl";

var loader = new THREE.STLLoader();
    loader.addEventListener( 'load', function ( event ) {
    var geometry = event.content;
    var material = new THREE.MeshLambertMaterial( { ambient: 0xff5533, color: 0xff5533} );
    mesh = new THREE.Mesh( geometry, material );

//位置変更                  
    mesh.position.set( 0,0,10);
//大きさ変更
    mesh.scale.set( 15,15,15);                   

scene.add( mesh );              
} );
loader.load( model_load );