Three.js STLLoader(3Dモデル読み込み)
今回は、Three.jsの「STLLoader」について書きます。
STLLoaderは、stl(3DCGファイルの方)をThree.jsに読み込む事ができる関数です。
ちなみに、stlは、三次元形状を表現するデータを保存するファイルフォーマットのひとつです。
詳しくは、ウィキペディアを見てください(笑)
STLLoaderを使って、3Dモデルを読み込むと、こんな感じに表示されます。
横です。
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 );
コレで終わりです。実行すると、こんな感じのが表示されると思います。
さらに、位置や大きさを変更する場合は、こうします。
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 );
これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました!