Posted By

daisuke103 on 02/11/08


Tagged

image textmate 3D load point rotation sample Pic as2


Versions (?)

AS2 3D 立体の面に画像を貼付けて回転させる


 / Published in: Other
 

  1. /* ここから */
  2. /*
  3. リンケージimage0〜image5の画像を用意
  4. */
  5. Stage.scaleMode = 'noScale';
  6.  
  7. // 3D rotation is defined by an object
  8. // which has rotation values for each axis
  9. var rotations = {x:0, y:0, z:0};
  10.  
  11. // The points within the cube are defined
  12. // in an array called boxPoints
  13. var boxPoints = [
  14. {x:-50, y:-50, z:-50},
  15. {x:50, y:50, z:-50},
  16. {x:-50, y:50, z:-50},
  17. {x:-50, y:-50, z:50},
  18. {x:50, y:-50, z:50},
  19. {x:50, y:50, z:50}
  20. ];
  21. /* Points
  22. 3 - 4
  23. / /|
  24. 0 - 5
  25. | |/
  26. 2 - 1
  27.  
  28. Notice that 2 points are missing, one in the front upper
  29. right and one in the back lower left. These are not needed
  30. since each side only requires 3 points to define its place
  31. in 3D space. Depending on intented image orientation,
  32. though, these points may be necessary for your images to
  33. go and face where you want them to
  34. */
  35.  
  36. // create a movie clip for the cube to reside
  37. // place it in the center of the screen
  38. this.createEmptyMovieClip("theScene", 1);
  39. theScene._x = theScene._y = 150;
  40.  
  41. // generate each image for the cube
  42. createImages();
  43.  
  44. // define enter frame event for rotating cube and
  45. // positioning images within it
  46. theScene.onEnterFrame = function(){
  47. // adjust axis rotations based on mouse position
  48. rotations.x -= this._ymouse/2000;
  49. rotations.y += this._xmouse/2000;
  50. // transform original 3D points to 2D based on rotations
  51. var points2d = pointsTransform(boxPoints, rotations);
  52.  
  53. // for each image clip, use movieClip3PointTransform
  54. // to alter its transform matrix so that it matches to
  55. // 3 points within points2d
  56. movieClip3PointTransform(this.image0, points2d[2], points2d[0], points2d[3]);
  57. movieClip3PointTransform(this.image1, points2d[5], points2d[1], points2d[2]);
  58. movieClip3PointTransform(this.image2, points2d[0], points2d[2], points2d[1]);
  59. movieClip3PointTransform(this.image3, points2d[4], points2d[3], points2d[0]);
  60. movieClip3PointTransform(this.image4, points2d[3], points2d[4], points2d[5]);
  61. movieClip3PointTransform(this.image5, points2d[1], points2d[5], points2d[4]);
  62. }
  63.  
  64. // create images as empty movie clips. Each contains another
  65. // empty movie clip in which each bitmap is attached. Using this
  66. // inner movie clip, any sized bitmap can be used and it will
  67. // stil conform to the size needed in the cube as this clip
  68. // is referenced in movieClip3PointTransform.
  69. function createImages(){
  70. // for each side
  71. var i = 6;
  72. while(i--){
  73. // create an image movie clip
  74. theScene.createEmptyMovieClip("image"+i, i);
  75. // create a contents clip
  76. theScene["image"+i].createEmptyMovieClip("contents", i);
  77. // attach the appropriate bitmap in the contents clip
  78. theScene["image"+i].contents.attachBitmap(
  79. flash.display.BitmapData.loadBitmap("image"+i),
  80. 1, false, true
  81. );
  82. }
  83. }
  84.  
  85. // transforms 3d points into 2d points based
  86. // on the rotation values provided
  87. function pointsTransform(points, rotations){
  88. var tpoints = new Array();
  89. var sx = Math.sin(rotations.x);
  90. var cx = Math.cos(rotations.x);
  91. var sy = Math.sin(rotations.y);
  92. var cy = Math.cos(rotations.y);
  93. var sz = Math.sin(rotations.z);
  94. var cz = Math.cos(rotations.z);
  95. var x,y,z, xy,xz, yx,yz, zx,zy;
  96.  
  97. var i = points.length;
  98. while (i--){
  99. x = points[i].x;
  100. y = points[i].y;
  101. z = points[i].z;
  102. // rotation around x
  103. xy = cx*y - sx*z;
  104. xz = sx*y + cx*z;
  105. // rotation around y
  106. yz = cy*xz - sy*x;
  107. yx = sy*xz + cy*x;
  108. // rotation around z
  109. zx = cz*yx - sz*xy;
  110. zy = sz*yx + cz*xy;
  111. tpoints[i] = {x:zx, y:zy};
  112. }
  113. return tpoints;
  114. }
  115.  
  116. // this function sets the transform for the image movie clips
  117. // each a, b, c, and d of the transform matrix are simply
  118. // based on the difference of positions of the points
  119. // they need to match with. The image movie clips' contents
  120. // sizes are required to determine how much of that difference
  121. // is actually applied to make the transform match
  122. function movieClip3PointTransform(mc, a,b,c){
  123. // deterimine visibility
  124. mc._visible = pointsIsVisible(a,b,c);
  125. // if not visible, exit function
  126. if (!mc._visible) return;
  127.  
  128. // set values for matrix using point b as top left
  129. var m = mc.transform.matrix;
  130. m.tx = b.x;
  131. m.ty = b.y;
  132. m.a = (a.x - b.x)/mc.contents._width;
  133. m.b = (a.y - b.y)/mc.contents._width;
  134. m.c = (c.x - b.x)/mc.contents._height;
  135. m.d = (c.y - b.y)/mc.contents._height;
  136. mc.transform.matrix = m;
  137. }
  138.  
  139. // using a 2D relationship between 3 points
  140. // determine if a 3D face is visible
  141. function pointsIsVisible(a,b,c){
  142. var db = b.x - a.x;
  143. if (!db) return (a.y > b.y == c.x > a.x);
  144. var dc = c.x - a.x;
  145. if (!dc) return (a.y > c.y == b.x < a.x);
  146. return ((b.y-a.y)/db < (c.y-a.y)/dc) != (a.x < b.x == a.x > c.x);
  147. }
  148.  

Report this snippet  

You need to login to post a comment.