效果預覽

多顆 3D 球體在空間中隨著滑鼠游標平滑跟隨、旋轉、縮放，形成極具立體感的互動視覺效果。

核心技術

• 自訂 3D 點類別：封裝座標變換、旋轉、投影、繪製邏輯
• 透視投影公式：screenX = (x/((z+DFOWA)/DFPP)+1) + centerX
• 動態複製元件：duplicateMovieClip 產生大量球體實例
• 色彩轉換：依 Z 深度調整 RGB，產生深度模糊感

製作流程

1. 文件設定

600×450 px，黑底 #000000。

2. 球體元件 Sphere

橢圓工具畫圓，移除輪廓。混色器面板設定徑向漸層：中心亮、邊緣暗，營造球體高光。用漸層變形工具調整光源位置。

3. 滑鼠游標元件 coursor

線條工具繪製簡易滑鼠箭頭，白色填色、無輪廓。

4. 動畫控制器 animation（4 關鍵幀）

第 1 幀定義 PuntoSpaziale 類別（義大利文「空間點」），包含完整 3D 幾何運算方法：

function PuntoSpaziale(x,y,z,target){
    this.target=target; this.x=x; this.y=y; this.z=z;
    this.firstx=x; this.firsty=y; this.firstz=z;
    this.DFOWA=100; this.DFPP=200;
    this.ScreenCenter_x=300; this.ScreenCenter_y=200;
    this.speed2dx=0; this.speed2dy=0;
    // 方法綁定...
    this.Rotate=Rotate; this.Scale=Scale; this.Traslate=Traslate;
    this.Proiection_x=Proiection_x; this.Proiection_y=Proiection_y;
    this.DrawPoint=DrawPoint;
}

核心方法包括：
• Rotate(tx,ty,tz)：三軸旋轉（弧度制）
• Scale(sx,sy,sz) / UScale(s)：非均勻/均勻縮放
• Traslate(a,b,c)：平移
• Proiection_x/y()：透視投影至螢幕座標
• DrawPoint(i)：複製 target 元件為 punto{i}，設定 _x,_y,_xscale,_yscale 及 ColorTransform（依 Z 深度變暗）

第 2~4 幀（原教學截斷）應包含：
- 建立多個 PuntoSpaziale 實例陣列
- enterFrame 迴圈：更新滑鼠目標座標、計算彈性跟隨、執行旋轉、呼叫 DrawPoint 繪製
- 記憶體管理：移除超出範圍或過舊的實例

數學原理速查

符號	意義	典型值
DFOWA	Distance From Object World Axes	100
DFPP	Distance From Projection Plane	200
ScreenCenter	投影平面中心（舞台中心）	(300,200)
投影公式	x' = x / (1 + (z+DFOWA)/DFPP) + cx	標準透視投影

優化與現代化方向

1. AS3 重寫：使用 Vector3D、Matrix3D、PerspectiveProjection 原生 3D API。
2. GPU 加速：改用 Starling/Away3D/Three.js 等框架，支援數萬粒子。
3. 物理模擬：加入彈簧阻尼、碰撞、重力，讓球體行為更自然。
4. 觸控支援：對應行動裝置觸控事件，拖曳旋轉 3D 場景。

常見除錯

球體不顯示或全疊在一起

檢查 DrawPoint 中 duplicateMovieClip 深度參數 i 是否唯一；確認 target 元件連結識別碼正確。

旋轉異常、翻轉

Rotate 參數單位為弧度，若傳入角度需乘 Math.PI/180。

效能隨球數下降

限制最大實例數、使用 cacheAsBitmap、或改用 BitmapData.draw() 批次渲染。