CircleGeometry


※上記の広告は60日以上更新のない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以降は不要。