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

Сначала вы должны подключиться к оборудованию, прежде чем вы сможете прочитать его ввод. Считаете ли вы использование родного API GamePad для браузера? Однако это не работает во всех браузерах.

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