CylinderGeometry - three.js wiki

更新日：2013-04-20, r58

---

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

説明

THREE.CylinderGeometry ( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded )

円柱のジオメトリを作る。

パラメータ

:radiusTop <float>[= 20]
|上面の半径。0にすると円錐(実際は正多角形の錐)になる（→ 錐はLatheとどっちで作ればいいのか？）
:radiusBottom <float>[= 20]
|底面の半径。
:height <float>[= 100]
|高さ。
:radiusSegments <int>[= 8]
|円周の分割数。
:heightSegments <int>[= 1]
|高さの分割数。
:openEnded <bool>[= false]
|true：フタをしない、false：フタをする　（＠ITの記事だと逆に書いてあるので注意。）

例

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

var cylinder = new THREE.Mesh(
  new THREE.CylinderGeometry(20,60,40,16),  // 上面半径20、下面半径60、高さ40、円周分割数16
  new THREE.MeshLambertMaterial( { color: 0x00ff00 } )
);
scene.add( cylinder );

---

円錐・正多角錐を作るのにCylinderとLathe(回転体)どちらがいいのか

Cylinderがいいっぽい。追試募集。

頂点数・面数

Latheで∠の形の辺を回して正16角錐をつくると、見たまんま頂点数は18（底面まわり16と中心1 + 錐の頂点1）、面数は32（底面16 + 側面16）になる。
Cylinderで上面半径ゼロにすると面とか頂点とか適当に削除されるが、錐の頂点はくっついていない。
面数は同じ32（底面16 + 側面16）だが、頂点数は35（底面まわり17(Circleと同じく円周の始点と終点はくっついていない)と中心1 + 錐の頂点17）。

処理速度

作る速度

var i = 0, mtr = new THREE.MeshLambertMaterial( { color: 0xff0000 } ), cylnd, lathe;
var d = new Date();
for(i=0; i<5000; i++){
  cylnd = new THREE.Mesh( new THREE.CylinderGeometry(0,60,40,16), mtr );
}
console.log('Cylinder: ' + ( (new Date()).getTime() - d.getTime() ) );

var points = [ new THREE.Vector3(0,0,0), new THREE.Vector3(60,0,0), new THREE.Vector3(0,0,40) ];
var d = new Date();
for(i=0; i<5000; i++){
  lathe = new THREE.Mesh( new THREE.LatheGeometry(points,16), mtr );
}
console.log('Lathe: ' + ( (new Date()).getTime() - d.getTime() ) );

こんな感じで計ったところ、Cylinder 600ms、Lathe 1400ms ぐらい。
Latheは最後の法線計算するので時間食ってるっぽい。

書く速度

scene.add(cylnd);  // さっきの
var d = new Date();
for(i=0; i<5000; i++){
  renderer.render( scene, camera );
}
console.log('render: ' + ( (new Date()).getTime() - d.getTime() ) );

scene.add(lathe);  // さっきの
lathe.rotation.x = -Math.PI/2;  // 同じ位置にする
lathe.position.y -= 20;         // 同じ位置にする
for(i=0; i<5000; i++){
  renderer.render( scene, camera );
}
console.log('render: ' + ( (new Date()).getTime() - d.getTime() ) );

両方 850ms ぐらいで全く変わらず。頂点多いから不利とか全くないらしい。

他

Latheは色がめんどくさそう。