前編同様、Three JSで使えるジオメトリー(形状)に関してまとめました。今回は少し複雑な形のものを紹介します。もし良かったら前編も見てみてください。ひな形も前編で紹介したものを使います。
ちなみに現状のバージョンは下記のとおりです。
- three.js : r73
TetrahedronGeometry：三角錐
いわゆる三角錐です。初期のピラミッドはこの形だとか。第２引数の必要性は良く分かりませんが、おそらく使うことはないでしょう。
1 | new THREE.TetrahedronGeometry( 50); |
引数
TetrahedronGeometry(
- 内接する円の半径,
- 追加頂点数：指定無しなら0
)
DEMO
OctahedronGeometry：正八面体
正四角錐を上下に2つ繋げた形です。8面ダイスと同じですね。同じく第2引数の必要性は分かりません。立体的な菱形の様な形状なのでキラキラしたエフェクトなんかに使えそうです。
1 | new THREE.OctahedronGeometry( 50); |
引数
OctahedronGeometry(
- 内接する円の半径,
- 追加頂点数：指定無しなら0
)
DEMO
DodecahedronGeometry：正十二面体
ここ辺りから面が多く、識別しずらいですが正12面体です。面の形が正五角形です。サッカーボールと似ています。(正確にはサッカーボールは切頂二十面体らしいですが)同じく第2引数の必要性は分かりません。
1 | new THREE.DodecahedronGeometry( 50); |
引数
DodecahedronGeometry(
- 内接する円の半径,
- 追加頂点数：指定無しなら0
)
DEMO
IcosahedronGeometry：正二十面体
正20面体です。面の形が正三角形です。同じく第2引数の必要性は分かりませんが、値を大きくするとほぼ球体になりますのでSphereGeometryとは別の球体へのアプロートとして使えそうです。
1 | new THREE.IcosahedronGeometry( 50); |
引数
IcosahedronGeometry(
- 内接する円の半径,
- 追加頂点数：指定無しなら0
)
DEMO
TorusGeometry：トーラス体
ドーナツの様な形状です。難しく言うと円の外側に回転軸を置き得られる回転体との事です。
1 | new THREE.TorusGeometry(50, 20, 40, 40); |
引数
TorusGeometry(
- 半径,
- 管の直径
- 円周のセグメント数：指定無しなら8,
- 管周りのセグメント数：指定無しなら6,
- 弧の長さのラジアン:指定無しなら2*Math.PI
)
DEMO
TorusKnotGeometry：輪環結び目
結び目の様な複雑な形状です。複雑すぎるため使いこなせることはない気がします。特に第6,7引数はいまいち意味が分かりませんでした。。ただ、かなり目を引くのでこの様にデモ用途としては役立ちそうです。
1 | new THREE.TorusKnotGeometry( 50, 10, 80, 20); |
引数
TorusKnotGeometry(
- 半径,
- 管の太さ,
- 円周のセグメント数：指定無しなら64,
- 管周りのセグメント数：指定無しなら8,
- 周回数：指定無しなら2,
- 管のねじれ?：指定無しなら3,
- 高さのスケール:指定無しなら1
)
DEMO
まとめ
前編後編と二回に分けてThree JSのジオメトリー(形状)についてまとめました。四角柱やら三角錐やら、遠い昔学校で習った様な単語を思い出しながら楽しめました。どの様な用途に使うか思いつかないものも多いですが、きっと数学や物理が得意な方だと色々と広がるのでしょう。紹介した以外にも、引数に直接頂点データを指定するジオメトリーもあるので機会があればご紹介したいと思います。
