【three.js】STLのファイル読み込み〜表示（i）

後々整理していくことを考えてとりあえず（i）と付番しました。
現在は、（全く私事都合のため、）思考限界で支離滅裂な文章しか書けず、表記や言い回しにも配慮が乏しく誤りが多分に含まれることをお許しください。

MTLファイルとOBJファイルの組み合わせによる扱いは公式にも記載があったのですが、STLについてはあまり記載がなかったので、随時参考になった情報を記載していきたいと思います。

ワイヤーフレーム属性をtrueにする

もともとの期待する挙動として、メッシュ処理を主眼としたアプリケーションを想定しているため、色付き３Dモデル（フラット表現）ではなく、メッシュの張り合わせによる表現を求めています。
その際、メッシュオブジェクトのマテリアルオブジェクトのワイヤーフレームプロパティをtrueにしてあげないとうまいこと期待したメッシュ表現が得られない状況でした。

new THREE.MeshPhongMaterial({                                      
               color: 0x990000, //球の色
               wireframe: true //ワイヤーフレーム有効
      }));

Three.js ワイヤーフレーム（wireframe） - Three.jsを使って、作ってみた

three.jsの公式3Dエディタ

MeshLabなどのGUIツールで確認しても良いですが、three.js固有のプロパティ設定などもありそうだったので、three.jsが公式で用意しているブラウザ上で動くGUIツール(3Dエディタ)を利用すると便利かもしれません（私はこれを発見したことで大変助かりました）。
サンプルの3Dデータなどをブラウザ表示したり、いじくりまわしたりして期待する表現のプロパティなどを確認すると、three.jsの挙動やオブジェクト、プロパティについての理解が進むように感じます。

three.js editor