CircleGeometry - three.js wiki

更新日：2013-04-20, r58

---

(わかりやすくするためにワイヤーフレームも一緒に表示している。)

説明

THREE.CircleGeometry ( radius, segments, thetaStart, thetaLength )

円のジオメトリを作る。

パラメータ

:radius <float>[= 50]
|半径。
:segments <int>[= 8]
|thetaLengthで設定した角度をこの数で分割する。
円と言っているが3DCGでは実際のところ多角形である。thetaLengthが2π(360度まるまる)のとき、segments=6だと正6角形、segments=8だと正8角形になる。増やすにつれ真の円に近付く。
:thetaStart <float>[= 0]
|開始角度。単位はラジアン。+X方向が0度、+Y方向が90度。
:thetaLength <float>[= 2π]
|中心角。単位はラジアン。(2πでも円周の始点と終点はくっつかない。)

例

ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで。

var circleGeo = new THREE.CircleGeometry(10, 16), // 半径10、正16角形
var greenMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
var circle = new THREE.Mesh( circleGeo, greenMaterial );
scene.add( circle );
// circle.geometry.computeVertexNormals();  // r57以前でのバグ対策。r58以降は不要。

etc

• 何も設定しないとオモテ面だけなので裏返ると全く見えなくなる（上の表示例ではワイヤーフレームも一緒に出してるので見えるが）。

---

(わかりやすくするためにワイヤーフレームも一緒に表示している。)

前述したように正多角形もこのジオメトリで作れる。
普通に正5角形とか作ると+X向きになるので、この時点で90度回して頂点位置を書き変えておくと後々便利かもしれない（それに従って+Y方向が0度になる）。

var regularPolygon = new THREE.Mesh(
  new THREE.CircleGeometry(10,5),
  new THREE.MeshLambertMaterial( { color: 0x00ff00 } )
);
scene.add( regularPolygon );
for(var i=1, len = regularPolygon.geometry.vertices.length; i<len; i++){
  regularPolygon.geometry.vertices[i].applyAxisAngle({x:0, y:0, z:1}, Math.PI/2); // Z軸で90度回転
}
// polygon.geometry.computeVertexNormals();  // r57以前でのバグ対策。r58以降は不要。