本教程介紹使用virtual-joystick插件實現一個自定義的虛擬搖桿，并控制小汽車的運動，效果如下：

購買插件：

https://shop.zjbcool.com/product/plug-ins-controler/

創建虛擬搖桿

加載腳本

使用load script拼圖或直接在.html文件中使用標簽從CDN加載。

或：

1

創建搖桿

使用create joystick拼圖的默認選項可以快速創建出一個虛擬搖桿實例。

自定義虛擬搖桿

額外選項

通過給extra option參數傳遞一個字典類型的數據，可以定制虛擬搖桿的外觀和交互方式。

首先，使用Dictionaries分類下的create empty dict拼圖創建一個空字典，并保存到變量option。

然后，使用插件中set joystick prop拼圖為虛擬搖桿設置額外選項。這里我們設置拼圖中的restOpacity參數為1，設置restOpacity為false。修改后可以讓虛擬搖桿在釋放時，不改變透明度，并且保持在當前位置。

最后將變量option傳遞給create joystick拼圖的extra option參數，如圖：

為搖桿設置背景圖片

在手游里面，虛擬搖桿往往被設計得很漂亮，下面繼續定制我們的虛擬搖桿，通過添加背景圖片，讓它看起來更精致。

使用插件中的set joystick background拼圖可以修改虛擬搖桿的背景，搖桿分為前后兩部分，分別通過參數front和back控制，它們的值支持CSS的輸入方式。

兩張PNG格式的背景圖：

默認虛擬搖桿的不透明度是0.5，使用插件中的set joystick opacity拼圖將不透明度設置為1。因為添加了背景圖片，透明度可以通過圖片控制。

通過設置額外參數和背景圖片，我們得到了想要的外觀和交互。如圖：

控制運動

下面我們的目標是，通過旋轉搖桿控制小汽車的方向;同時，只要搖桿有位移，小汽車就會以一定的速度運動。

控制旋轉

插件中的joystick event拼圖和get data拼圖可以獲取虛擬搖桿在交互時候的數據，這些數據只有在joystick event拼圖的on move插槽下才能獲取，你可以通過打印到控制臺查看數據的結構和內容，根據需要獲取。

這里，我們通過如下拼圖獲取搖桿的旋轉角度，并且用它控制小汽車的旋轉，如圖：

在上圖的set transform拼圖中，需要控制小汽車的垂直方向的軸，由于Verge3D版本分為Blender/3dsMax/Maya三個版本，坐標系不一致，要根據所用的版本控制Z軸或Y軸。

控制移動

joystick event拼圖中有3個插槽，代表搖桿的3個狀態：開始、移動、結束。我們可以通過創建一個carMoving變量，分別在3個插槽中設置它的值，來標記小汽車是否處于運動狀態。當虛擬搖桿正在移動時，carMoving為true，小汽車處于運動狀態;當虛擬搖桿被松開時，carMoving為false，小汽車處于停止狀態。

然后，在every frame拼圖中，給小汽車一個速度，它就可以根據虛擬搖桿的位移運動了。

最后，為了避免小汽車跑遠了回不來，我們給它設置一個約束，控制它的運動范圍。

完整拼圖如下：

總結

以上是生活随笔為你收集整理的css摇杆,【宅家呗专题】Virtual Joystick虚拟摇杆插件教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。