相机的 javascript 操纵杆

Question

嘿，我需要创建一个用于相机控制的操纵杆。操纵杆需要能够向左、右、上、下四个方向移动，其中两个方向具有停止功能。我在网上搜索了几个小时，终于找到了一个叫做 nipplejs 的东西。我已将 nipplejs 的代码附加到此线程:

var radius = 100;

var sampleJoystick = {
    mode: 'static',
    position: {
      left: '50%',
      top: '50%'
    },
    size: radius*2,
    color: 'black'
};

var joystick;
var position;
joystick = nipplejs.create(sampleJoystick);
joystick.on('start end', function(evt, data) {
  position = data;
}).on('move', function(evt, data) {
  position = data;
}).on('dir:up plain:up dir:left plain:left dir:down' +
      'plain:down dir:right plain:right',
      function(evt, data) {
  //position=data;
}
     ).on('pressure', function(evt, data) {
  position=data;
});

<script src="//yoannmoinet.github.io/nipplejs/javascripts/nipplejs.js"></script>
<div id="zone_joystick">
</div>

乍一看，它看起来像是一个完美的库，但第二次看时，我发现操纵杆上没有方向指示器，而且我无法使用该操纵杆实现停止行为，并且它不会是直观的控制适合会使用该软件的老年人。

我正在寻找具有我所讨论的功能的面板控件的替代解决方案。

功能:操纵杆可转向 4 个不同方向:左、右、上、下。操纵杆也有停止功能。

Answer 1

您必须先连接到硬件，然后才能读取其输入。您是否考虑过使用浏览器原生 GamePad API？但这并不适用于所有浏览器。

https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API