2次元のShapeから厚みをつけて3次元にできる

Three.jsの例、寝る前にwebgl_geometry_shapes.htmlを見る。

ブラウザで見ると複数の図形が表示される。
でもやってることはどれもほとんど同じ。

穴あき円の場合、 
extrudeSettings = { amount: 20,  bevelEnabled: true, bevelSegments: 2, steps: 2 };
arcShape = new THREE.Shape();
arcShape.moveTo( 50, 10 );
arcShape.arc( 10, 10, 40, 0, Math.PI*2, false );
holePath = new THREE.Path();
holePath.moveTo( 20, 10 );
holePath.arc( 10, 10, 10, 0, Math.PI*2, true );
arcShape.holes.push( holePath );
arc3d = arcShape.extrude( extrudeSettings );
パラメータをいろいろいじってみる。

1行目はどんな厚みのさせ方をさせるかを記述してる感じ：
  • amount - 厚み
  • bevelEnabled - 角を丸める:true
  • bevelSegments - 角を丸める細かさ
  • steps - 厚みの分割数
の設定をextrudeSettingsに格納している。

あとは
  • Shapeクラスのオブジェクトを作る
  • ベジェ曲線や弧、直線を指定するメソッドを使って図形を描く
  • （穴あき円の場合）穴のためにPathクラスのオブジェクトを作ってShareクラスのオブジェクトにあるholesに追加
  • extrudeメソッドでextrudeSettingsを反映させる
そんな感じ。

気づけば梅雨が開けてたw
今日も暑い。
2012/07/27 02:57
タグ