Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています（＾＾）　週末はレストランやコンビニのお菓子のことを書いています。

Three.js　CylinderGeometry（円柱）

Three.js

今回は、Three.jsの「CylinderGeometry（円柱）」について書きます。

CylinderGeometry（円柱）は、Three.jsのジオメトリ（形状）の一つです。
形はコレです。
f:id:gupuru:20131214213851p:plain
円柱です。
こちらのジオメトリ（形状）は、少し値を変えれば、円錐などの形に変える事ができます。
こんな形に変える事ができます。
f:id:gupuru:20131214214140p:plain
f:id:gupuru:20131214214144p:plain


CylinderGeometryのコンストラクタです。

THREE.CylinderGeometry ( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded );
  • radiusTop ・・・上面の半径です。0にすると円錐になります。
  • radiusBottom ・・・底面の半径です。
  • height ・・・高さです。
  • radiusSegments ・・・円周の分割数です。
  • heightSegments ・・・高さの分割数です。
  • openEnded ・・・true：フタをしない,false：フタをする　


実際のコードは、こちらです。

 //マテリアルはMeshPhongMaterial, color: 0x00FF7F
// 上面半径2,下面半径20,高さ40,円周分割数50     
var Cylinder = new THREE.Mesh(                                     
     new THREE.CylinderGeometry(20,20,40,50),                         
     new THREE.MeshPhongMaterial({                                      
               color: 0x00FF7F
      }));
        
//sceneオブジェクトに追加
scene.add(Cylinder);

上のコードを実行すると、
f:id:gupuru:20131214213851p:plain
こうなります。

円錐の形にするには、こうします。
上面の半径を０にします。

 //マテリアルはMeshPhongMaterial, color: 0x00FF7F
// 上面半径0,下面半径20,高さ40,円周分割数50     
var Cylinder = new THREE.Mesh(                                     
     new THREE.CylinderGeometry(0,20,40,50),                         
     new THREE.MeshPhongMaterial({                                      
               color: 0x00FF7F
      }));
        
//sceneオブジェクトに追加
scene.add(Cylinder);

こういう形にするには、
f:id:gupuru:20131214214144p:plain

 new THREE.CylinderGeometry(20,60,40,50)

こうします。

これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました！