Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

Three.js ワイヤーフレーム(wireframe)

今回は、Three.jsの「ワイヤーフレーム(wireframe)」について書きます。


ワイヤーフレームを使うと、こんなのが出来ます。
f:id:gupuru:20131204184354p:plain

ワイヤーフレーム使ってない状態はコレです。
f:id:gupuru:20131204185904p:plain


ワイヤーフレームは、簡単に言いますと、3Dモデルを竹ひご細工のような線形状のみで表現することです。
さらに詳しく知りたい人は、こちらのwikipediaを見てください。
ワイヤーフレーム - Wikipedia

では、実際のソースコードを書きます。

//「立方体」の生成
var cube = new THREE.Mesh(
     //立方体の大きさ(300,300,300)                                           
     new THREE.CubeGeometry(300,300,300),
     //マテリアルはMeshPhongMaterial                          
     new THREE.MeshPhongMaterial({                                      
               color: 0x990000, //球の色
               wireframe: true //ワイヤーフレーム有効
      }));
        
 //sceneにcubeを追加
      scene.add(cube);       

マテリアル(材質)の宣言と生成している所に、

 wireframe: true

と書くだけです。
とても簡単ですね(笑)
もちろん、falseにすると通常の描画に戻ります。


これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました!