I was using A-Frame for Web VR production, but I wanted to vibrate the device when selecting an item on the screen.
But there seems to be no method to make A-Frame vibrate the controller.
As a result, I found a way to vibrate each device, but I did not have any Japanese documents, so I will post it Qiita.
It can be implemented quite simply.
var duration = 200; navigator.vibrate(duration);
Vibration API-Developer’s Guide | According to MDN
Can I use, IE and Opera are not yet compatible with Safari yet …
As browser is not supported, it seems that it is impossible at present to vibrate with Safari.
Can I use … Support tables for HTML5
originally spear wanted favorite is here.
How to open the web browser with VR and vibrate when the target targeted by the controller is selected.
If you just vibrate it, you can use this code.
var duration = 200;
var value = 0.5;
var gamepads = navigator.getGamepads && navigator.getGamepads();
for (var i = 0; gamepads.length; i++) {
var gamepad = gamepads[i];
gamepad.hapticActuators[0].pulse(value, duration);
}
Documentation is here
GamepadHapticActuator.pulse ()-Web API | MDN
Let’s introduce with A-Frame that can easily build WebVR.
<html>
<head>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script>
AFRAME.registerComponent('vibration', {
schema: {
duration: {type: 'int', default: 200},
value: {type: 'number', default: 0.5}
},
init: function() {
this.onClick = this.onClick.bind(this);
this.el.addEventListener('click', this.onClick);
this.el.setAttribute('class', 'collidable');
},
onClick: function(e) {
navigator.vibrate(this.data.duration);
var gamepads = navigator.getGamepads && navigator.getGamepads();
for (var i = 0; gamepads.length; i++) {
var gamepad = gamepads[i];
gamepad.hapticActuators[0].pulse(this.data.value, this.data.duration);
}
}
});
</script>
</head>
<body>
<a-scene>
<a-sky color="black"></a-sky>
<a-entity cursor="rayOrigin: mouse"></a-entity>
<a-entity laser-controls raycaster="objects: .collidable; far: 5;"></a-entity>
<a-plane vibration width="1" height="1" position="0 0.5 -2"></a-plane>
</a-scene>
</body>
</html>
When I saw it on Oculus Quest’s web browser, the laser from the right-hand controller comes out like this, and when I hit the button and hit the white square, it vibrates.
Discussion about this post