「CircleGeometry」の編集履歴(バックアップ)一覧はこちら
「CircleGeometry」(2013/04/20 (土) 11:25:27) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
#divclass(modif){更新日:&date(), r58}
#divclass(hd){#hr()}
#divid(d0){}
(わかりやすくするためにワイヤーフレームも一緒に表示している。)
***説明
>&b(){THREE.CircleGeometry (} radius, segments, thetaStart, thetaLength &b(){)}
円のジオメトリを作る。
***パラメータ
:''radius'' <float>[= 50]
|半径。
:''segments'' <int>[= 8]
|thetaLengthで設定した角度をこの数で分割する。&br()円と言っているが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
-何も設定しないとオモテ面だけなので裏返ると全く見えなくなる(上の表示例ではワイヤーフレームも一緒に出してるので見えるが)。
----
#divid(d1){}
(わかりやすくするためにワイヤーフレームも一緒に表示している。)
前述したように正多角形もこのジオメトリで作れる。
普通に正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以降は不要。
#include(-g_circle)
#include(-g_circle2)
//.
#divclass(modif){更新日:&date(), r58}
#divclass(hd){#hr()}
#divid(d0){}
(わかりやすくするためにワイヤーフレームも一緒に表示している。)
***説明
>&b(){THREE.CircleGeometry (} radius, segments, thetaStart, thetaLength &b(){)}
円のジオメトリを作る。
***パラメータ
:''radius'' <float>[= 50]
|半径。
:''segments'' <int>[= 8]
|thetaLengthで設定した角度をこの数で分割する。&br()円と言っているが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
-何も設定しないとオモテ面だけなので裏返ると全く見えなくなる(上の表示例ではワイヤーフレームも一緒に出してるので見えるが)。
----
#divid(d1){}
(わかりやすくするためにワイヤーフレームも一緒に表示している。)
前述したように正多角形もこのジオメトリで作れる。
普通に正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以降は不要。
#include(-g_circle)
#include(-g_circle2)
//.