編輯導語：很多時候我們會用到3D的效果，今天筆者教大家用axure做一個3D的效果，本文以三維世界地圖為案例，簡單的闡述axure製作3D原型的技巧，我們一起來看一下。
一、Axure製作出來的3D效果
原型預覽地址：https://7w42g3.axshare.com/#g=1
上圖就是axure製作出來的3D地圖的效果，大家可以體驗一下，主要是用圖片+動態面板的效果來實現的，下面開始教學。
二、準備材料
素材：地球各個角度的圖片，圖片越多，實現的效果越好，作者是大概以3度一張圖片；如果你們有專業的設備可以自行拍攝，如果沒有的話也可以在網上下載。
1. axure內材料
材料1：按鈕：左右按鈕各一個。
材料2：圖片元件:1個將圖片轉為動態面板（命名為內面板），然後倒入第一張圖片。
將按鈕放在對應位置，完成後下圖所示：
然後複製內面板的面板狀態，有多少張圖片就複製多少個狀態，如下圖所示。
完成後一次將圖片素材按順序倒入對應的動態面板。
材料3：動態面板（命名為循環面板），用於實現地圖自傳的效果，後面在交互中會詳細介紹，這裡在面板裡有兩個狀態即可。
三、交互設置
1. 左右按鈕交互設置
滑鼠單擊右按鈕時，設置內面板狀態為next，向後循環。
滑鼠單擊左按鈕時，設置內面板狀態為previous，向前循環。
2. 滑鼠左右拖動交互設置
在內面板滑鼠拖動時，這裡需要做一個判斷滑鼠是左滑動還是右滑動，用[[DragX]]來判斷。
如果[[DragX]]>0，即右滑動，這時觸發右按鈕滑鼠單擊時即可；如果[[DragX]]<0，即左滑動，這時觸發左按鈕滑鼠單擊時即可。
3. 鍵盤左右方向鍵按下時交互設置
頁面按鍵按下時，如果按下的是←（左方向鍵），這時觸發左按鈕滑鼠單擊時即可；如果按下的是→（右方向鍵），這時觸發右按鈕滑鼠單擊時即可。
4. 循環面板交互設置
首先要確保循環面板有兩個狀態或以上，面板內不需要放任何元件。
循環面板載入時，我們設置該面板狀態為next，向後循環循環間隔30ms，這裡的時間是轉動快慢時間，可以根據實際情況自己設置。
循環面板狀態改變時，觸發右按鈕滑鼠單擊時即可。
5. 停止自動循環交互設置
我們接下來要實現滑鼠移入時停止自轉，移出時開始自轉的效果。
首先把頁面內所有原型組合起來轉為動態面板（命名為外面板），滑鼠移入時，設置循環面板的狀態為停止循環；滑鼠移出時，觸發循環面板載入時事件（觸發循環開始）。
以上就是本期分享的全部內容，謝謝閱讀。
下期文章，作者會展開介紹3D技術的應用場景——VR看車的教程，請期待。
本文由 @做產品但不是經理 原創發布於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議。