タグ「Papervision3D」の一覧

Papervision3D - CurlingPlane.as

2008.6.29 日曜日

CurlingPlane.as を使ってみた。

以前、Papervision3Dについて色々調べてたら、
note.xさんというところで面白そうなもの見つけたので自分も作ってみた。
参照：Papervision3Dメモ #29


サンプル

と、言ってもこれ作ったの随分前だけど…フォルダの隅に埋もれてたので蔵出し。
AS3の話とかPapervision3Dの話とか一切無しでいきなりこんな物を出してくるこのブログの無節操ぶり。

CurlingPlane.asの公開元はこちら。

var obj:CurlingPlane = new CurlingPlane(picData:BitmapData, curl:int);
// curl = planeの分割数
obj.rotate(0);
scene.addChild( obj );

で、planeオブジェクトを生成して、

obj.rotate(angle:number);
// angle = めくれの角度

でページをめくる。

ページめくりを作る際、ページの裏表を表現するために、表向きのPlaneと裏返しのPlaneを貼り合わせて作る感じになるんだけど、
オリジナルの状態では裏返しのページを作る事が出来ないので、裏返しページ用に反転画像を作ったりする必要があったり、少々面倒。

公開元の、続きのエントリのコメント欄で、Planeを裏返しにする処理を追加する方法が記されているので、これを適用して使ってます。

  1. /*
  2. CurlingPlane.as
  3. Lee Felarca
  4. http://www.zeropointnine.com/blog
  5. v0.8.1 - 4-22-2007
  7. Mimics the curling of a sheet of paper, as if a page is being turned in a book.
  9. Source code licensed under a Creative Commons Attribution 3.0 License.
  10. http://creativecommons.org/licenses/by/3.0/
  11. Some Rights Reserved. Improvements made to this class are encouraged.
  13. HISTORY:
  15. v0.8.1 Removed sharedPresets() method, as it turned out to be little use.
  16. Added tesselation parameter to constructor.
  18. v0.8.0 First public release
  19. */
  20.  
  21. package
  22. {
  23. import org.papervision3d.core.*;
  24. import org.papervision3d.core.proto.*;
  25. import org.papervision3d.core.geom.*;
  26. import org.papervision3d.materials.BitmapMaterial;
  27. import flash.display.BitmapData;
  28. import flash.geom.Matrix;
  31. public class CurlingPlane extends Mesh3D
  32. {
  33. public static const MAX_ROTATION:Number = 180;
  34.  
  35. private var segmentsH:int;
  36. private var stripsU:Array = new Array();
  37. private var vStripWidths:Array = new Array();
  38. private var origVerts:Array = new Array();
  39. private var vertices:Array;
  40. private const DEGREE:Number = Math.PI / 180;
  41.  
  42. // hard-coded magic numbers (!) :P
  43. private var boundary1:Number = 55;
  44. private var boundary2:Number = 130;
  45. private var boundary1Mod:Number = 1.35;
  46. private var boundary2Mod:Number = 0.6;
  47. private var segmentsW:int = 5;
  48.  
  49.  
  50. //public function CurlingPlane(bmp:BitmapData, numHorizontalStrips:int = 5)
  51. public function CurlingPlane(bmp:BitmapData, numHorizontalStrips:int = 5, invert:Boolean = false)
  52. {
  53. /*
  54. * PARAMETERS:
  55. *
  56. * bmp The BitmapData image to be mapped to the plane.
  57. *
  58. * numHorizontalStrips Number of horizontal strips to be tesselated. More strips = less
  59. * texture perspective distortion, slower performance. Can be set as low
  60. * as 1. The default value of 5 seems to work pretty well for medium-sized
  61. * images. (Note that the number of vertical strips is hardcoded to 5.)
  62. */
  64. segmentsH = Math.floor(numHorizontalStrips);
  65. if (segmentsH < 1) segmentsH = 1;
  67. // spaces segmentsW in a logarithmic progression
  68. for (var i:int = 0; i <= segmentsW; i++)
  69. stripsU[i] = Math.log(i+1) / Math.log(segmentsW+1);
  70. /////////////////////
  71.  
  72. var myBitmapData:BitmapData
  73.  
  74. if (invert) {
  75. var myMatrix:Matrix = new Matrix();
  76. myMatrix.rotate(Math.PI);
  77. myMatrix.translate(bmp.width, bmp.height);
  78. myBitmapData = new BitmapData(bmp.width, bmp.height);
  79. myBitmapData.draw(bmp,myMatrix);
  80. } else {
  81. myBitmapData = bmp;
  82. }
  83.  
  84. /////////////////////
  85. super( new BitmapMaterial( myBitmapData ), new Array(), new Array(), null, null );
  86. this.material.smooth = true; // take note!
  87. vertices = this.geometry.vertices;
  88.  
  89. var width:Number = bmp.width;
  90. var height:Number = bmp.height;
  91.  
  92. var faces:Array = this.geometry.faces;
  93.  
  94. var gridX    :Number = segmentsW;
  95. var gridY    :Number = segmentsH;
  96. var gridX1   :Number = gridX + 1;
  97. var gridY1   :Number = gridY + 1;
  99. var iW       :Number = width / gridX;
  100. var iH       :Number = height / gridY;
  102. // Vertices
  103. for( var ix:int = 0; ix < gridX1; ix++ )
  104. {
  105. for( var iy:int = 0; iy < gridY1; iy++ )
  106. {
  107. var idx:Number = Math.floor( ix / (segmentsH+1) );
  108. var x:Number = stripsU[idx] * width;
  109. var y :Number = iy * iH - (height/2);
  110. vertices.push( new Vertex3D( x, y, 0 ) );
  111. }
  112. }
  114. if(invert) {
  115. vertices.reverse();
  116. }
  118. // Faces
  119. var uvA :NumberUV;
  120. var uvC :NumberUV;
  121. var uvB :NumberUV;
  123. for(  ix = 0; ix < gridX; ix++ )
  124. {
  125. for(  iy= 0; iy < gridY; iy++ )
  126. {
  127. // Triangle A
  128. var a:Vertex3D = vertices[ ix     * gridY1 + iy     ];
  129. var c:Vertex3D = vertices[ ix     * gridY1 + (iy+1) ];
  130. var b:Vertex3D = vertices[ (ix+1) * gridY1 + iy     ];
  132. uvA =  new NumberUV( stripsU[ix],  iy     / gridY );
  133. uvC =  new NumberUV( stripsU[ix],  (iy+1) / gridY );
  134. uvB =  new NumberUV( stripsU[ix+1], iy    / gridY );
  136. faces.push( new Face3D( [ a, b, c ], null, [ uvA, uvB, uvC ] ) );
  138. // Triangle B
  139. a = vertices[ (ix+1) * gridY1 + (iy+1) ];
  140. c = vertices[ (ix+1) * gridY1 + iy     ];
  141. b = vertices[ ix     * gridY1 + (iy+1) ];
  143. uvA =  new NumberUV( stripsU[ix+1], (iy+1) / gridY );
  144. uvC =  new NumberUV( stripsU[ix+1], iy     / gridY );
  145. uvB =  new NumberUV( stripsU[ix],   (iy+1) / gridY );
  147. faces.push( new Face3D( [ a, b, c ], null, [ uvA, uvB, uvC ] ) );
  148. }
  149. }
  151. // store the (unrotated) verts
  152. for (var l:int = 0; l < vertices.length; l++) {
  153. origVerts[l] = new Vertex3D();
  154. origVerts[l].x = vertices[l].x;
  155. origVerts[l].y = vertices[l].y;
  156. origVerts[l].z = vertices[l].z;
  157. }
  158.  
  159. // calc rectangle widths
  160. vStripWidths = new Array();
  161. for (var m:int = 0; m < segmentsW; m++) {
  162. vStripWidths[m] = stripsU[m+1] * width - stripsU[m] * width;
  163. }
  164.  
  165. this.geometry.ready = true;
  166. }
  169. public function rotate( degree:Number) : void
  170. {
  171. if (degree<0) degree=0;
  172. if (degree>MAX_ROTATION) degree=MAX_ROTATION;
  173. applyVerts( calcVerts(degree) );
  174. }
  175.  
  176.  
  177. private function calcVerts( degRot:Number ) : Array
  178. {
  179. if (degRot<0) degRot=0;
  180. if (degRot>MAX_ROTATION) degRot=MAX_ROTATION;
  181.  
  182. var myVerts:Array = new Array();
  183. var vStripRots:Array = new Array();
  184.   var r:Number = -degRot * DEGREE;
  185. var rMod:Number;
  187. // Calculate rotation amounts for each rectangle and store in vStripRots
  188.  
  189. // [A] Applies to all degrees
  190. rMod = boundary1Mod;
  192. // [B] Applies to all degrees > boundary1
  193. if (degRot > boundary1) {
  194. var a:Number = degRot - boundary1; // range: 0 to MAX_ROTATION - B1
  195. a = a / (boundary2 - boundary1) * boundary2Mod; // range: 0 to B2MOD
  196. rMod -= a; // range: B1MOD to B1MOD-B2MOD
  197. }
  198.  
  199. // Recursively multiply vStripRots elements by rMod
  200. for (var i:int=0; i < segmentsW; i++) {
  201. vStripRots[i] = r;
  202. r *= rMod;
  203. }
  204.  
  205. // [C] Applies to degrees > boundary2.
  206. //    Grow vStripRots proportionally to MAX_ROT. (Note the 'additive' nature of these 3 steps).
  207. if (degRot >= boundary2) {
  208. for (var j:int=0; j < vStripRots.length; j++) {
  209. var diff:Number = MAX_ROTATION*DEGREE - Math.abs(vStripRots[j]);
  210. var rotMult:Number = degRot - boundary2; // range: 0 to 30
  211. rotMult = rotMult / (MAX_ROTATION - boundary2); // range: 0 to 1
  212. vStripRots[j] -= diff * rotMult; // range: __ to MAX_ROTATION
  213. }
  214. }
  216. // [2] Create myVerts[]
  217. for (var k:int=0; k <  vertices.length; k++) {
  218. var idx:Number = Math.floor( k / (segmentsH+1) ) - 1;
  219. if (idx>=0) {
  220. myVerts[k] = new Vertex3D( vStripWidths[idx], origVerts[k].y, origVerts[k].z );
  221. } else {
  222. myVerts[k] = new Vertex3D( origVerts[k].x,    origVerts[k].y, origVerts[k].z );
  223. }
  224. }
  225.  
  226. // [3] Apply rotation to myVerts[]
  227. for (var l:int = segmentsH+1; l < myVerts.length; l++) {
  228. var idx2:Number = Math.floor( l / (segmentsH+1) ) - 1;
  229. myVerts[l] = rotateVertexY( myVerts[l], vStripRots[idx2] )
  230. }
  231.  
  232. // [4] 'connect' the rectangles
  233. for (var m:int = (segmentsH+1) * 2; m < myVerts.length; m++) { // (first 2 edges are fine)
  234. myVerts[m].x += myVerts[ m - (segmentsH+1) ].x;
  235. myVerts[m].z += myVerts[ m - (segmentsH+1) ].z; // (y stays constant)
  236. }
  238. return myVerts;
  239. }
  240.  
  241.  
  242. private function applyVerts( v:Array ) : void
  243. {
  244. for (var i:int = 0; i < vertices.length; i++) {
  245. vertices[i].x = v[i].x;
  246. vertices[i].y = v[i].y;
  247. vertices[i].z = v[i].z; 
  248. }
  249. }
  252. private function rotateVertexY( p:Vertex3D, angleY:Number ):Vertex3D
  253. {
  254. var x:Number = Math.cos(angleY) * p.x - Math.sin(angleY) * p.z;
  255. var z:Number = Math.cos(angleY) * p.z + Math.sin(angleY) * p.x;
  256. var y:Number = p.y;
  257. return new Vertex3D(x, y, z);
  258. }
  259. }
  260. }

※赤字は追加・変更した箇所
記されてなかったけど、flash.geom.Matrixをインポートしないとエラーになったので追記。

こうすると

var obj:CurlingPlane = new CurlingPlane(picData:BitmapData, curl:int, invert:Boolean );
// curl = planeの分割数
// invert = 裏返しにするかどうか(true:裏返し)

という定義になり、

ページを作る際、
表向き用1枚＋裏返し用1枚を組み合わせて1ページを作る形に。

一応ソースも置いておきます。

3d_test04.zip(Flash CS3用)

※パブリッシュにはPaperVision3Dが必要です。

FLEXやFlashDeveropに移行しちゃった方が作業早そうなんだけど、
仕事でデザイナー側のFlash担当と連携することが多いので、未だにFlashの方が使用頻度高い…。

タグ: | カテゴリー: ActionScript3 | コメント(0) »