3DモデリングWebアプリの作り方(4)「いろいろな形状1」

3DモデリングWebアプリの作り方(4)「いろいろな形状1」

平田孝広
平田孝広 (ID263) 公認maker 2014/09/29
0

これまでの連載:

3DモデリングWebアプリの作り方(1)
https://media.dmm-make.com/item/907

3DモデリングWebアプリの作り方(2)「3DモデリングWebアプリを開発」
https://media.dmm-make.com/item/1615/

3DモデリングWebアプリの作り方(3)「3Dデータのフォーマットについて」
https://media.dmm-make.com/item/1775/

今回からは、3Dオブジェクトを作っていくところを説明していきます。

three.jsには色々な形状を生成できるGeometryが用意されています。
今回はその中でも、基本的なものを説明します。

今回のサンプルコードは、下記にご用意しました(three.jsの新しくリリースされたリビジョン68に対応しています)。
http://jsdo.it/dengurix2/jaYL

立方体

BoxGeometry(幅,高さ,奥行き)
こちらは連載第2回で説明したものです。

球体

SphereGeometry(球の半径,Y軸周りの分割数, Y軸の分割数)
分割数を変更するだけでも不思議な形が作れて面白いです。

正四面体

TetrahedronGeometry(外半径, 曲面分割数)
基本的に正四面体用なのですが、曲面分割数を多く設定すると球体に近づきます。

正八面体

OctahedronGeometry(外半径, 曲面分割数)
基本的に正八面体用なのですが、正四面体と同様に曲面分割数を多く設定すると球体に近づきます。

正二十面体

IcosahedronGeometry(半径, 曲面分割数)
基本的に正八面体用なのですが、こちらも正四面体や正八面体と同様に曲面分割数を多く設定すると球体に近づきます。

円柱

CylinderGeometry(上面の半径, 下面の半径, 高さ, 円周の分割数)
上面と下面の半径が変更できるので、簡単な台とかも作れそうですね。
上面か下面の片方の半径を0にすると、円錐形状も作れます。

トーラス

TorusGeometry(トーラスの半径, 管の直径, トーラスの円周方向の分割数, 管の分割数)
ドーナツの形状が作れます。

下記ソースコードが、サンプルコードの今回説明したGeometryの72行目〜78行目にあたります。

//new THREE.BoxGeometry( 10, 10, 10 ),//直方体(幅, 高さ, 奥行き)
//new THREE.SphereGeometry( 10, 10, 10 ),//球体(球の半径, Y軸周りの分割数, Y軸の分割数)
//new THREE.TetrahedronGeometry( 10, 0 ),//正四面体(外半径, 曲面分割数)
//new THREE.OctahedronGeometry( 10, 0 ),//正八面体(外半径, 曲面分割数)
//new THREE.IcosahedronGeometry( 10, 0 ),//正二十面体(半径, 曲面分割数)
//new THREE.CylinderGeometry( 5, 10, 15, 10 ),//円柱(上面の半径, 下面の半径, 高さ, 円周の分割数)
//new THREE.TorusGeometry(10, 3, 10, 10 ),//トーラス(全体半径,管直径,円周方向分割数,管分割数)

描画したいGeometryの行の先頭の//を削除すれば描画されますし、
各Geometryの行の先頭に//を記述すれば描画されません。
//以降の文字は実行されません。
上記ソースは、SphereGeometryが描画されます。

各Geometryのパラメーターを変更して色々な形状を作ってみてください。

次回は、もう少し複雑なGeometyを説明します。

参考にしてくれた記事

記事が登録されていません。
この記事を参考にして、新しく記事を投稿しよう!

違反について