編輯導(dǎo)語：很多時候我們會用到3D的效果，今天筆者教大家用axure做一個3D的效果，本文以三維世界地圖為案例，簡單的闡述axure制作3D原型的技巧，我們一起來看一下。

一、Axure制作出來的3D效果

原型預(yù)覽地址：https://7w42g3.axshare.com/#g=1

上圖就是axure制作出來的3D地圖的效果，大家可以體驗一下，主要是用圖片+動態(tài)面板的效果來實現(xiàn)的，下面開始教學(xué)。

二、準(zhǔn)備材料

素材：地球各個角度的圖片，圖片越多，實現(xiàn)的效果越好，作者是大概以3度一張圖片；如果你們有專業(yè)的設(shè)備可以自行拍攝，如果沒有的話也可以在網(wǎng)上下載。

1. axure內(nèi)材料

材料1：按鈕：左右按鈕各一個。

材料2：圖片元件:1個將圖片轉(zhuǎn)為動態(tài)面板（命名為內(nèi)面板），然后倒入第一張圖片。

將按鈕放在對應(yīng)位置，完成后下圖所示：

然后復(fù)制內(nèi)面板的面板狀態(tài)，有多少張圖片就復(fù)制多少個狀態(tài)，如下圖所示。

完成后一次將圖片素材按順序倒入對應(yīng)的動態(tài)面板。

材料3：動態(tài)面板（命名為循環(huán)面板），用于實現(xiàn)地圖自傳的效果，后面在交互中會詳細介紹，這里在面板里有兩個狀態(tài)即可。

三、交互設(shè)置

1. 左右按鈕交互設(shè)置

鼠標(biāo)單擊右按鈕時，設(shè)置內(nèi)面板狀態(tài)為next，向后循環(huán)。

鼠標(biāo)單擊左按鈕時，設(shè)置內(nèi)面板狀態(tài)為previous，向前循環(huán)。

2. 鼠標(biāo)左右拖動交互設(shè)置

在內(nèi)面板鼠標(biāo)拖動時，這里需要做一個判斷鼠標(biāo)是左滑動還是右滑動，用[[DragX]]來判斷。

• 如果[[DragX]]>0，即右滑動，這時觸發(fā)右按鈕鼠標(biāo)單擊時即可；
• 如果[[DragX]]<0，即左滑動，這時觸發(fā)左按鈕鼠標(biāo)單擊時即可。

3. 鍵盤左右方向鍵按下時交互設(shè)置

頁面按鍵按下時，如果按下的是←（左方向鍵），這時觸發(fā)左按鈕鼠標(biāo)單擊時即可；如果按下的是→（右方向鍵），這時觸發(fā)右按鈕鼠標(biāo)單擊時即可。

4. 循環(huán)面板交互設(shè)置

首先要確保循環(huán)面板有兩個狀態(tài)或以上，面板內(nèi)不需要放任何元件。

循環(huán)面板載入時，我們設(shè)置該面板狀態(tài)為next，向后循環(huán)循環(huán)間隔30ms，這里的時間是轉(zhuǎn)動快慢時間，可以根據(jù)實際情況自己設(shè)置。

循環(huán)面板狀態(tài)改變時，觸發(fā)右按鈕鼠標(biāo)單擊時即可。

5. 停止自動循環(huán)交互設(shè)置

我們接下來要實現(xiàn)鼠標(biāo)移入時停止自轉(zhuǎn)，移出時開始自轉(zhuǎn)的效果。

首先把頁面內(nèi)所有原型組合起來轉(zhuǎn)為動態(tài)面板（命名為外面板），鼠標(biāo)移入時，設(shè)置循環(huán)面板的狀態(tài)為停止循環(huán)；鼠標(biāo)移出時，觸發(fā)循環(huán)面板載入時事件（觸發(fā)循環(huán)開始）。

以上就是本期分享的全部內(nèi)容，謝謝閱讀。

下期文章，作者會展開介紹3D技術(shù)的應(yīng)用場景——VR看車的教程，請期待。

本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。