※現在、「wonderfl build flash online」求人コンテンツ制作に関してのアンケートを実施中です！みなさまのお力添えを頂いて、続々とアンケート結果が集まっていますが、まだまだ募集しております。ご協力のほど、どうぞよろしくお願いいたします！

wonderfl運営事務局
→アンケートページ（※ログインしてからお答えいただけるようになっています。）

 notice: Flash editor updated! Join the development! Thanks to MiniBuilder


embed

noswf download fullscreen
flash swf thumbnail play
reload download fullscreen

TALK
Your Code is very useful. Thank You
at 2010/01/04 17:11:57 by
FORKED
>sort

[Study] Sphere using Graphics.drawTriangles forked from: [Study] Sphere using Graphics.drawTriangles [diff(1)]

  1. // forked from alumican_net's [Study] Sphere using Graphics.drawTriangles
  2. /**
  3.  * FlashPlayer10から追加になったdrawTrianglesで球面マッピング
  4.  * 重複頂点はできるだけマージ
  5.  * あとクォータニオンで回転とか
  6.  * 
  7.  * ブログでちょっとだけ解説
  8.  * http://blog.alumican.net/2009/12/20_014813
  9.  * 
  10.  * @author alumican.net
  11.  * @see texture http://visibleearth.nasa.gov/
  12.  */
  13. package
  14. {
  15.     import com.bit101.components.HUISlider;
  16.     import com.bit101.components.Label;
  17.     import com.bit101.components.RadioButton;
  18.     import flash.display.Bitmap;
  19.     import flash.display.BitmapData;
  20.     import flash.display.Loader;
  21.     import flash.display.Sprite;
  22.     import flash.display.StageAlign;
  23.     import flash.display.StageScaleMode;
  24.     import flash.events.Event;
  25.     import flash.net.URLRequest;
  26.     import flash.system.LoaderContext;
  27.     import net.hires.debug.Stats;
  28.     
  29.     /**
  30.      * FP10Sphere
  31.      * 
  32.      * @author alumican
  33.      */
  34.     public class FP10Sphere extends Sprite
  35.     {
  36.         //----------------------------------------
  37.         //CLASS CONSTANTS
  38.         
  39.         
  40.         
  41.         
  42.         
  43.         //----------------------------------------
  44.         //VARIABLES
  45.         
  46.         /**
  47.          * スフィア
  48.          */
  49.         private var _sphere:Sphere;
  50.         
  51.         /**
  52.          * 回転速度
  53.          */
  54.         private var _vx:Number;
  55.         private var _vy:Number;
  56.         
  57.         
  58.         
  59.         
  60.         
  61.         //----------------------------------------
  62.         //STAGE INSTANCES
  63.         
  64.         
  65.         
  66.         
  67.         
  68.         //----------------------------------------
  69.         //METHODS
  70.         
  71.         /**
  72.          * コンストラクタ
  73.          */
  74.         public function FP10Sphere():void
  75.         {
  76.             stage.align     = StageAlign.TOP_LEFT;
  77.             stage.scaleMode = StageScaleMode.NO_SCALE;
  78.             stage.frameRate = 60;
  79.             addChild(new Stats());
  80.             
  81.             _createSphere();
  82.         }
  83.         
  84.         /**
  85.          * 初期化
  86.          */
  87.         private function _createSphere():void
  88.         {
  89.             var texture:BitmapData;
  90.             var loader:Loader = new Loader();
  91.             loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(e:Event):void
  92.             {
  93.                 var texture:BitmapData = Bitmap(loader.contentLoaderInfo.content).bitmapData;
  94.                 
  95.                 _vx = 0;
  96.                 _vy = 0;
  97.                 
  98.                 //UI色々
  99.                 var vertexCountLabel:Label  = new Label(stage, 100, 86, "");
  100.                 var surfaceCountLabel:Label = new Label(stage, 180, 86, "");
  101.                 function updateCount():void
  102.                 {
  103.                     vertexCountLabel.text  = "vertex : "  + String(_sphere.vertexCount);
  104.                     surfaceCountLabel.text = "surface : " + String(_sphere.surfaceCount);
  105.                 }
  106.                 
  107.                 new Label(stage, 300, 10, "PROJECTOR");
  108.                 new RadioButton(stage, 300, 30, "Utils3D.projectVectors"   , true , function(e:Event):void { _sphere.useProjectVectors = true;  } );
  109.                 new RadioButton(stage, 300, 50, "Matrix3D.transformVectors", false, function(e:Event):void { _sphere.useProjectVectors = false; } );
  110.                 
  111.                 new Label(stage, 100, 10, "SHAPE");
  112.                 var segWSlider:HUISlider   = new HUISlider(stage, 100, 26, "Segment W", function(e:Event):void { _sphere.segmentW = Math.round(e.target.value); updateCount(); } );
  113.                 var segHSlider:HUISlider   = new HUISlider(stage, 100, 46, "Segment H", function(e:Event):void { _sphere.segmentH = Math.round(e.target.value); updateCount(); } );
  114.                 var radiusSlider:HUISlider = new HUISlider(stage, 100, 66, "Radius"   , function(e:Event):void { _sphere.radius   = Math.round(e.target.value); } );
  115.                 radiusSlider.minimum = 10;
  116.                 radiusSlider.maximum = 200;
  117.                 radiusSlider.labelPrecision = 0;
  118.                 radiusSlider.value = 150;
  119.                 segWSlider.minimum = segHSlider.minimum = 2;
  120.                 segWSlider.maximum = segHSlider.maximum = 64;
  121.                 segWSlider.labelPrecision = segHSlider.labelPrecision = 0;
  122.                 segWSlider.value = 16;
  123.                 segHSlider.value = 8;
  124.                 
  125.                 //スフィアを生成する
  126.                 _sphere   = addChild(new Sphere(texture, radiusSlider.value, segWSlider.value, segHSlider.value)) as Sphere;
  127.                 _sphere.x = stage.stageWidth  * 0.5;
  128.                 _sphere.y = stage.stageHeight * 0.5 + 50;
  129.                 
  130.                 updateCount();
  131.                 
  132.                 addEventListener(Event.ENTER_FRAME, _update);
  133.             });
  134.             loader.load(new URLRequest("http://lab.alumican.net/wonderfl/fp10sphere/texture.png"), new LoaderContext(true));
  135.         }
  136.         
  137.         /**
  138.          * 毎フレーム実行
  139.          * @param    e
  140.          */
  141.         private function _update(e:Event):void 
  142.         {
  143.             //回転
  144.             _sphere.rotateByQuaternion(
  145.                 _vx += (-(mouseY / stage.stageHeight - 0.5) * 10 - _vx) * 0.3,
  146.                 _vy += ( (mouseX / stage.stageWidth  - 0.5) * 10 - _vy) * 0.3,
  147.                 0
  148.             );
  149.             
  150.             //レンダリング
  151.             _sphere.render();
  152.         }
  153.     }
  154. }
  156. import flash.display.BitmapData;
  157. import flash.display.Graphics;
  158. import flash.display.Sprite;
  159. import flash.display.TriangleCulling;
  160. import flash.geom.Matrix3D;
  161. import flash.geom.Utils3D;
  162. import flash.geom.Vector3D;
  164. /*****************************************//**
  165.  * 頂点座標情報
  166.  * 
  167.  * @author alumican.net
  168.  */
  169. internal class Vertex3D
  170. {
  171.     //----------------------------------------
  172.     //CLASS CONSTANTS
  173.     
  174.     
  175.     
  176.     
  177.     
  178.     //----------------------------------------
  179.     //VARIABLES
  180.     
  181.     /**
  182.      * 3D座標
  183.      */
  184.     public var x:Number;
  185.     public var y:Number;
  186.     public var z:Number;
  187.     
  188.     /**
  189.      * UV座標
  190.      */
  191.     public var u:Number;
  192.     public var v:Number;
  193.     
  194.     /**
  195.      * 頂点インデックス
  196.      */
  197.     public var index:int;
  198.     
  199.     
  200.     
  201.     
  202.     
  203.     //----------------------------------------
  204.     //STAGE INSTANCES
  205.     
  206.     
  207.     
  208.     
  209.     
  210.     //----------------------------------------
  211.     //METHODS
  212.     
  213.     /**
  214.      * コンストラクタ
  215.      */
  216.     public function Vertex3D():void 
  217.     {
  218.         index = -1;
  219.     }
  220. }
  222. /*****************************************//**
  223.  * 3Dオブジェクトの基底クラス
  224.  * 
  225.  * @author alumican.net
  226.  */
  227. internal class Object3D extends Sprite
  228. {
  229.     //----------------------------------------
  230.     //CLASS CONSTANTS
  231.     
  232.     static public const PI:Number        = Math.PI;
  233.     static public const PI2:Number       = PI * 2;
  234.     static public const TO_RADIAN:Number = PI  / 180;
  235.     static public const TO_DEGREE:Number = 180 / PI;
  236.     
  237.     
  238.     
  239.     
  240.     
  241.     //----------------------------------------
  242.     //VARIABLES
  243.     
  244.     /**
  245.      * レンダリング先
  246.      */
  247.     public var _viewport:Sprite;
  248.     
  249.     /**
  250.      * テクスチャ画像
  251.      */
  252.     public var _texture:BitmapData;
  253.     
  254.     /**
  255.      * 3D変形マトリックス
  256.      */
  257.     private var _transform3D:Matrix3D;
  258.     
  259.     /**
  260.      * 3D頂点情報
  261.      */
  262.     private var _vertices3D:Vector.<Number>;
  263.     private var _indices:Vector.<int>;
  264.     private var _uvData:Vector.<Number>;
  265.     
  266.     /**
  267.      * 頂点/サーフィス数
  268.      */
  269.     public function get vertexCount():uint { return _vertices3D.length / 3; }
  270.     public function get surfaceCount():uint { return _indices.length / 3; }
  271.     
  272.     /**
  273.      * プロジェクト後の座標
  274.      */
  275.     private var _transformedVertices3D:Vector.<Number>;
  276.     private var _transformedVertices2D:Vector.<Number>;
  277.     
  278.     /**
  279.      * projectVectors用
  280.      */
  281.     private var _uvtData:Vector.<Number>;
  282.     
  283.     /**
  284.      * クォータニオン
  285.      */
  286.     private var _qx:Number;
  287.     private var _qy:Number;
  288.     private var _qz:Number;
  289.     private var _qw:Number;
  290.     
  291.     /**
  292.      * レンダリング方法の指定
  293.      * true  : projectVectors
  294.      * false : transformVectors
  295.      */
  296.     public var useProjectVectors:Boolean;
  297.     
  298.     
  299.     
  300.     
  301.     
  302.     //----------------------------------------
  303.     //STAGE INSTANCES
  304.     
  305.     
  306.     
  307.     
  308.     
  309.     //----------------------------------------
  310.     //METHODS
  311.     
  312.     /**
  313.      * コンストラクタ
  314.      */
  315.     public function Object3D(texture:BitmapData = null):void 
  316.     {
  317.         _viewport = addChild( new Sprite() ) as Sprite;
  318.         
  319.         _texture = texture;
  320.         
  321.         useProjectVectors = true;
  322.         
  323.         _transform3D = new Matrix3D();
  324.         _transform3D.identity();
  325.         
  326.         _qx = _qy = _qz = 0;
  327.         _qw = 1;
  328.         
  329.         create();
  330.     }
  331.     
  332.     /**
  333.      * オブジェクトを生成する
  334.      */
  335.     public function create():void
  336.     {
  337.         _vertices3D = new Vector.<Number>();
  338.         _indices    = new Vector.<int>();
  339.         _uvData     = new Vector.<Number>();
  340.         
  341.         _createVetices(_vertices3D, _indices, _uvData);
  342.         
  343.         _transformedVertices2D = new Vector.<Number>(_uvData.length, true);
  344.         _transformedVertices3D = new Vector.<Number>(_vertices3D.length, true);
  345.         
  346.         _uvtData = new Vector.<Number>(_vertices3D.length, true);
  347.         var n:uint = _uvData.length;
  348.         var i:uint = 0;
  349.         var j:uint = 0;
  350.         while (i < n)
  351.         {
  352.             _uvtData[j++] = _uvData[i++];
  353.             _uvtData[j++] = _uvData[i++];
  354.             _uvtData[j++] = null;
  355.         }
  356.     }
  357.     
  358.     /**
  359.      * 3D頂点座標、頂点インデックス、UVデータを生成する（オーバーライド用）
  360.      * @param    vertices3D
  361.      * @param    indices
  362.      * @param    uvData
  363.      */
  364.     protected function _createVetices(vertices3D:Vector.<Number>, indices:Vector.<int>, uvData:Vector.<Number>):void
  365.     {
  366.     }
  367.     
  368.     /**
  369.      * オブジェクトをレンダリングする
  370.      */
  371.     public function render():void
  372.     {
  373.         if (!_texture) return;
  374.         
  375.         if (useProjectVectors)
  376.         {
  377.             //projectVectorsを使う
  378.             Utils3D.projectVectors(_transform3D, _vertices3D, _transformedVertices2D, _uvtData);
  379.         }
  380.         else
  381.         {
  382.             //transformVectorsを使う
  383.             _transform3D.transformVectors(_vertices3D, _transformedVertices3D);
  384.             
  385.             var n:uint = _uvData.length,
  386.                 j:uint = 0;
  387.             for (var i:uint = 0; i < n; i += 2)
  388.             {
  389.                 _transformedVertices2D[i    ] = _transformedVertices3D[j    ];
  390.                 _transformedVertices2D[i + 1] = _transformedVertices3D[j + 1];
  391.                 j += 3;
  392.             }
  393.         }
  394.         
  395.         var g:Graphics = _viewport.graphics;
  396.         g.clear();
  397.         g.beginBitmapFill(_texture, null, false, false);
  398.         g.drawTriangles(_transformedVertices2D, _indices, _uvData, TriangleCulling.NEGATIVE);
  399.     }
  400.     
  401.     /**
  402.      * クォータニオンを用いた回転を付与する
  403.      * @param    rotateX
  404.      * @param    rotateY
  405.      * @param    rotateZ
  406.      * @param    useDegree
  407.      */
  408.     public function rotateByQuaternion(rotateX:Number, rotateY:Number, rotateZ:Number, useDegree:Boolean = true):void
  409.     {
  410.         if (useDegree)
  411.         {
  412.             rotateX *= TO_RADIAN;
  413.             rotateY *= TO_RADIAN;
  414.             rotateZ *= TO_RADIAN;
  415.         }
  416.         
  417.         //----------------------------------------
  418.         //回転クォータニオンの生成
  419.         var fSinPitch:Number       = Math.sin(rotateY * 0.5),
  420.             fCosPitch:Number       = Math.cos(rotateY * 0.5),
  421.             fSinYaw:Number         = Math.sin(rotateZ * 0.5),
  422.             fCosYaw:Number         = Math.cos(rotateZ * 0.5),
  423.             fSinRoll:Number        = Math.sin(rotateX * 0.5),
  424.             fCosRoll:Number        = Math.cos(rotateX * 0.5),
  425.             fCosPitchCosYaw:Number = fCosPitch * fCosYaw,
  426.             fSinPitchSinYaw:Number = fSinPitch * fSinYaw,
  427.             
  428.             rx:Number = fSinRoll * fCosPitchCosYaw     - fCosRoll * fSinPitchSinYaw,
  429.             ry:Number = fCosRoll * fSinPitch * fCosYaw + fSinRoll * fCosPitch * fSinYaw,
  430.             rz:Number = fCosRoll * fCosPitch * fSinYaw - fSinRoll * fSinPitch * fCosYaw,
  431.             rw:Number = fCosRoll * fCosPitchCosYaw     + fSinRoll * fSinPitchSinYaw,
  432.             
  433.             //----------------------------------------
  434.             //元のクォータニオンに回転を合成
  435.             qx:Number = _qw * rx + _qx * rw + _qy * rz - _qz * ry,
  436.             qy:Number = _qw * ry - _qx * rz + _qy * rw + _qz * rx,
  437.             qz:Number = _qw * rz + _qx * ry - _qy * rx + _qz * rw,
  438.             qw:Number = _qw * rw - _qx * rx - _qy * ry - _qz * rz,
  439.             
  440.             //----------------------------------------
  441.             //正規化
  442.             norm:Number = Math.sqrt(qx * qx + qy * qy + qz * qz + qw * qw),
  443.             inv:Number,
  444.             
  445.             //----------------------------------------
  446.             //行列へ変換
  447.             xx:Number,
  448.             xy:Number,
  449.             xz:Number,
  450.             xw:Number,
  451.             
  452.             yy:Number,
  453.             yz:Number,
  454.             yw:Number,
  455.             
  456.             zz:Number,
  457.             zw:Number,
  458.             
  459.             m:Vector.<Number> = _transform3D.rawData;
  460.         
  461.         //----------------------------------------
  462.         //正規化
  463.         
  464.         if(((norm < 0) ? -norm : norm) < 0.000001)
  465.         {
  466.             qx = qy = qz = 0.0;
  467.             qw = 1.0;
  468.         }
  469.         else
  470.         {
  471.             inv = 1 / norm;
  472.             qx *= inv;
  473.             qy *= inv;
  474.             qz *= inv;
  475.             qw *= inv;
  476.         }
  477.         
  478.         //----------------------------------------
  479.         //行列へ変換
  480.         xx = qx * qx;
  481.         xy = qx * qy;
  482.         xz = qx * qz;
  483.         xw = qx * qw;
  484.         
  485.         yy = qy * qy;
  486.         yz = qy * qz;
  487.         yw = qy * qw;
  488.         
  489.         zz = qz * qz;
  490.         zw = qz * qw;
  491.         
  492.         m[0]  = 1 - 2 * (yy + zz);
  493.         m[1]  =     2 * (xy - zw);
  494.         m[2]  =     2 * (xz + yw);
  495.         
  496.         m[4]  =     2 * (xy + zw);
  497.         m[5]  = 1 - 2 * (xx + zz);
  498.         m[6]  =     2 * (yz - xw);
  499.         
  500.         m[8]  =     2 * (xz - yw);
  501.         m[9]  =     2 * (yz + xw);
  502.         m[10] = 1 - 2 * (xx + yy);
  503.         
  504.         _transform3D.rawData = m;
  505.         
  506.         //----------------------------------------
  507.         //クォータニオンの保存
  508.         _qx = qx;
  509.         _qy = qy;
  510.         _qz = qz;
  511.         _qw = qw;
  512.     }
  513. }
  515. /*****************************************//**
  516.  * スフィア
  517.  * 
  518.  * @author alumican.net
  519.  */
  520. class Sphere extends Object3D
  521. {
  522.     //----------------------------------------
  523.     //CLASS CONSTANTS
  524.     
  525.     
  526.     
  527.     
  528.     
  529.     //----------------------------------------
  530.     //VARIABLES
  531.     
  532.     /**
  533.      * 半径
  534.      */
  535.     public function get radius():Number { return _radius; }
  536.     public function set radius(value:Number):void { _radius = value;  create(); }
  537.     private var _radius:Number;
  538.     
  539.     /**
  540.      * 水平方向の分割数
  541.      */
  542.     public function get segmentW():uint { return _segmentW; }
  543.     public function set segmentW(value:uint):void { _segmentW = value; create(); }
  544.     private var _segmentW:uint;
  545.     
  546.     /**
  547.      * 垂直方向の分割数
  548.      */
  549.     public function get segmentH():uint { return _segmentH; }
  550.     public function set segmentH(value:uint):void { _segmentH = value; create(); }
  551.     private var _segmentH:uint;
  552.     
  553.     
  554.     
  555.     
  556.     
  557.     //----------------------------------------
  558.     //METHODS
  559.     
  560.     /**
  561.      * コンストラクタ
  562.      */
  563.     public function Sphere(texture:BitmapData = null, radius:Number = 100, segmentW:uint = 8, segmentH:uint = 6):void
  564.     {
  565.         _radius   = radius;
  566.         _segmentW = segmentW;
  567.         _segmentH = segmentH;
  568.         
  569.         super(texture);
  570.     }
  571.     
  572.     /**
  573.      * 頂点情報を生成する
  574.      */
  575.     override protected function _createVetices(vertices3D:Vector.<Number>, indices:Vector.<int>, uvData:Vector.<Number>):void 
  576.     {
  577.         var i:uint,
  578.             j:uint,
  579.             n:uint,
  580.             p:Vertex3D,
  581.             index:uint,
  582.             x:Number,
  583.             y:Number,
  584.             u:Number,
  585.             v:Number,
  586.             angleU:Number,
  587.             angleV:Number,
  588.             points:Vector.<Vertex3D> = new Vector.<Vertex3D>(),
  589.             poly:Vector.<Vertex3D> = new Vector.<Vertex3D>(4),
  590.             poleN:Vertex3D,
  591.             poleS:Vertex3D,
  592.             segW:uint = _segmentW + 1,
  593.             segH:uint = _segmentH + 1;
  594.         
  595.         //頂点の生成
  596.         for (i = 0; i < segH; ++i)
  597.         {
  598.             for (j = 0; j < segW; ++j)
  599.             {
  600.                 p = new Vertex3D();
  601.                 
  602.                 //このあたりの頂点をマージしたい
  603.                 //if (i == 0       ) { if (j == 0) poleN = p; else p = poleN; }        // テクスチャ上端に対応する頂点
  604.                 //if (i == segH - 1) { if (j == 0) poleS = p; else p = poleS; }        // テクスチャ下端に対応する頂点
  605.                 //if (j == segW - 1) { p = _points[_points.length - segW + 1]; }    // テクスチャ右端に対応する頂点
  606.                 
  607.                 u = j / (segW - 1);
  608.                 v = i / (segH - 1);
  609.                 
  610.                 angleU = u * PI2;
  611.                 angleV = v * PI;
  612.                 
  613.                 y = -_radius * Math.cos(angleV);
  614.                 x =  _radius * Math.sin(angleU) * Math.sin(angleV);
  615.                 z = -_radius * Math.cos(angleU) * Math.sin(angleV);
  616.                 
  617.                 p.x = x;
  618.                 p.y = y;
  619.                 p.z = z;
  620.                 p.u = u;
  621.                 p.v = v;
  622.                 
  623.                 points.push(p);
  624.             }
  625.         }
  626.         
  627.         //ポリゴンの生成
  628.         n = points.length;
  629.         index = 0;
  630.         for (i = 0; i < n; ++i)
  631.         {
  632.             if (i + segW + 1 >= n) break;
  633.             if ((i + 1) % segW == 0) continue;
  634.             
  635.             poly[0] = points[i];
  636.             poly[1] = points[i + 1];
  637.             poly[2] = points[i + segW];
  638.             poly[3] = points[i + segW + 1];
  639.             
  640.             for (j = 0; j < 4; ++j)
  641.             {
  642.                 //新規頂点を追加
  643.                 if ((p = poly[j]).index == -1)
  644.                 {
  645.                     p.index = index++;
  646.                     
  647.                     //3D座標
  648.                     vertices3D.push(p.x, p.y, p.z);
  649.                     
  650.                     //UV座標
  651.                     uvData.push(p.u, p.v);
  652.                 }
  653.             }
  654.             
  655.             //頂点インデックスに追加(時計回り)
  656.             indices.push(
  657.                 poly[0].index, poly[1].index, poly[2].index,
  658.                 poly[1].index, poly[3].index, poly[2].index
  659.             );
  660.         }
  661.     }
  662. }
noswf
Get Adobe Flash Player