介绍
aframe-input-mapping-component是一款专门用于WebVR框架A-Frame的npm包，它提供了一种简单快速的方式，让开发者定义虚拟现实设备输入并将其映射到可视化对象的不同属性上。
此组件允许您为用户在不同VR设备上的输入设置映射，无论输入是在游戏手柄，触摸屏，空间追踪器还是其他可用设备上完成的。您可以一次定义输入映射，然后使用它们来访问虚拟现实界面。
在本教程中，我们将会学习：
- 如何使用npm在您的A-Frame 项目中添加aframe-input-mapping-component
- 如何定义输入映射
- 如何访问映射上定义的输入
安装
要在您的A-Frame项目中使用aframe-input-mapping-component，您需要先安装它。幸运的是，这很容易做到。
在您的项目根目录中，打开命令行终端并输入以下命令：
npm install aframe-input-mapping-component –save-dev
使用
在您成功安装aframe-input-mapping-component之后，就可以开始定义输入映射。
在您的HTML页面中，添加以下代码：
<a-entity input-mapping> </a-entity>
现在，在您的JavaScript中，您可以使用以下方法来定义输入映射：
-- -------------------- ---- -------
--- ------------ - ----------------------------------------------------------------------
-------------------- - -
---------- -
--------- ----------
-------- ----------------
-
--
‘myInput’ 是您定义的输入名称。它可以是任何内容，只要它易于识别和记忆即可。
‘source’ 是定义您正在使用的设备名称。例如，’gamepad’ 表示使用游戏手柄，’tracked-controls’ 表示使用空间追踪器。
‘event’ 表示触发输入的事件。在此示例中，按钮DPadDown表示当游戏手柄的方向键向下时，输入事件将被触发。
访问输入
现在，您已经成功定义了输入映射，您需要在代码中访问它们。
在您的JavaScript中，您可以使用以下方法访问输入映射：
let inputMapping = document.querySelector(‘[input-mapping]’).components[‘input-mapping’]; let myInput = inputMapping.getInput(‘myInput’);
此 ‘getInput’ 方法允许您访问您定义的输入映射，并使用它们来控制虚拟现实界面。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------- ------- ----- ------- --------- ----------------
----- --------------- ---------------------------- -----------------
------- --------------------------------------------------------------
------- ----------------------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------------------------------
-------
------------------ -
-------- -----
-
------- -
------- ------
-
--------
-------
------
---------
--------- --------------
-----------
--------- -------------------- ---- ------ ---- ------- ---- ------ ----
---------------- -----
----------- --- ---
----------- -- --
---------
-----------
----------
--------
--- ------------ - ----------------------------------------------------------------------
-------------------- - -
---------- -
--------- ----------
-------- ----------------
-
--
--- ------- - ---------------------------------
--- --- - -------------------------------
----------------------- -------- ------- -
---------------------------- -------- -------
---
---------
-------
-------
在本示例中，我们定义了一个名为 ‘myInput’ 的输入。我们指定了当按下游戏手柄的方向键向下时，将触发事件。
在JavaScript中，我们访问输入映射并设置一个回调，一旦检测到此事件，它将更新模型的材质颜色。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731781e8991b448e94dc