No Result
View All Result
Cloud Reports
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital
No Result
View All Result
Cloud Reports
No Result
View All Result

Using JavaScript to vibrate the device with a web browser

npn by npn
June 23, 2019
in Web development
Reading Time: 2min read
A A
0

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.

READ ALSO

Javascript developer should stop for … in for now

Javascript developer should stop for … in for now

December 31, 2020
18
How to display colors (color, bgcolor) in console.log () for javascript developers!

How to display colors (color, bgcolor) in console.log () for javascript developers!

January 22, 2021
11

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.

ADVERTISEMENT

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.

vr.jpg
Tags: A-FrameCSS3Gamepad APIJavaScriptVibration APIWebVR
ShareTweetShare
Previous Post

Linux performance tuning – Idea to optimize Linux system

Next Post

[JS] 2 == 1 = 0 is true

npn

npn

Related Posts

Javascript developer should stop for … in for now
Javascript

Javascript developer should stop for … in for now

December 31, 2020
18
How to display colors (color, bgcolor) in console.log () for javascript developers!
Javascript

How to display colors (color, bgcolor) in console.log () for javascript developers!

January 22, 2021
11
What is Unit Test? Introduction and Example about Unit Test
Web development

What is Unit Test? Introduction and Example about Unit Test

December 24, 2020
6
Accelerate your Continuous Integration pipelines with Directed Acyclic Graph (DAG)
Web development

Accelerate your Continuous Integration pipelines with Directed Acyclic Graph (DAG)

December 22, 2020
3
The FUNDAMENTAL model for learning Web Development.
Web development

The FUNDAMENTAL model for learning Web Development.

December 21, 2020
19
UTM Google, know everything to better use them!
Web development

UTM Google, know everything to better use them!

December 18, 2020
8
Next Post

[JS] 2 == 1 = 0 is true

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

No Result
View All Result

Categories

  • Android (1)
  • Ant Design tutorial (7)
  • Javascript (21)
  • Layout and Routing (2)
  • Linux (3)
  • PC & Laptop (53)
  • React (17)
  • SQL (2)
  • Technology & Digital (152)
  • The Basics (5)
  • Web development (38)

Search

No Result
View All Result
No Result
View All Result
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital