Three.js ワイヤーフレーム(wireframe)
今回は、Three.jsの「ワイヤーフレーム(wireframe)」について書きます。
ワイヤーフレームを使うと、こんなのが出来ます。
ワイヤーフレームを使ってない状態はコレです。
ワイヤーフレームは、簡単に言いますと、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にすると通常の描画に戻ります。
これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました!