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

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

Three.js CylinderGeometry(円柱)

今回は、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
こうなります。

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

 //マテリアルは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)

こうします。


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

広告を非表示にする