A-frame show mouse pointer with a function

Question

I am currently using a scene using A-frame (https://aframe.io) where I am hiding the mouse pointer in my scene. How can I create something where when a function is issued, my mouse pointer will show and when another function occurs, my mouse pointer will hide.

Currently the dfeault is that my mouse pointer is hidden. I want it so that when a function called "showPointer" occurs, my mouse pointer will show again and when a function called hidePointer occurs, my mouse pointer will hide again. How can I acheive this. My functions:

<script>
function hidePointer() {
//hide mouse pointer
}

function showPointer() {
//show mouse pointer 
} 
</script>

See this question: https://stackoverflow.com/questions/1071356/is-it-possible-to-hide-the-cursor-in-a-webpage-using-css-or-javascript — JosephDaSilva, Jun 15 '21 at 21:08
I'm guessing the code for this problem is completely different than that issue because of the fact that I am trying to show or hide a cursor in a webvr environment rendered in 3d rather than a 2d webpage. — Aidan Young, Jun 15 '21 at 21:18
Not exactly because instead of keeping the pointerLock in a fixed state of being hidden or not I want to be able to show or hide the pointer depending on a function so it's not in a fixed state. — Aidan Young, Jun 18 '21 at 17:19
Well for starters, the link is using css to hide the cursor when I need to use JavaScript. — Aidan Young, Jun 19 '21 at 16:22
Javascript alone is not able to hide your cursor. It is a style ultimately. — JavaScript, Jun 19 '21 at 22:01

Ibrahim W. · Answer 1 · 2021-06-20T22:34:12.157

0

const fullBrowserWindow = document.querySelector(`body`);
const popupElement = document.querySelector(`div.popup`);

function hidePointer() {
  fullBrowserWindow.style.cursor = 'none';
}

function showPointer() {
  fullBrowserWindow.style.cursor = 'default';
}

popupElement.onmouseenter = (event) => {
  showPointer();
  console.log('Mouse entered the div, Pointer Shown!');
};

popupElement.onmouseleave = (event) => {
  hidePointer();
  console.log('Mouse left the div, Pointer Removed!');
};

body {
  width: 100%;
  height: 500px;
  padding: 0;
  margin: 0;
  cursor: none;
  background-color: #ff0000;
}
body div.wegbl {
  width: 480px;
  height: 312px;
  background-color: #000000;
}
body div.popup {
  width: 200px;
  height: 35px;
  background-color: #ffffff;
  position: absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>No Cursor - on when mouse is over popup</title>
</head>
<body>
    <div class="webgl"></div>
    <div class="popup">Popup Promt? [Y/N]</div>
</body>
</html>

edited Jun 20 '21 at 22:34

answered Jun 18 '21 at 19:12

Ibrahim W.

615
8
20

The code works perfectly but uses css to hide the cursor and doesnt hide the cursor on a function. I need to hide the cursor with a javascript function. When the function occurs, the cursor should be hidden, and when another function occurs, the cursor should show again. – Aidan Young Jun 19 '21 at 16:25
Javascript doesn't have an API which hides the cursor (to my knowledge), it is in the css property cursor set to 'none'. even in A-frame they use set canvasElement.style.cursor = 'none' when you apply look-controls="pointerLockEnabled: true;" – Ibrahim W. Jun 19 '21 at 19:42
I'm trying to do the opposite however, I want to hide my cursor at all times but when a object in my scene is clicked a 2d popup is triggered. I'm wondering how I can hide my cursor as a default so when I'm hovering over my popup which is a div with the class of Popup1 the cursor should show. – Aidan Young Jun 20 '21 at 20:52
check the solution, I have altered it. `I want to hide my cursor at all times` => cursor: none; css-property is on the body element of the html page(this means the cursor is always hidden) => the popup can be a div with position: absolute; and when the mouseenter/mouseleave events are triggered on top of the div you show hide the cursor, check the modified snippet, please. Thanks! – Ibrahim W. Jun 20 '21 at 22:39

score 0 · Accepted Answer · answered Jun 24 '21 at 15:58

<script>
function hidePointer() {
  $('a-scene').canvas.style.cursor='none'
}
            
function showPointer() {
  $('a-scene').canvas.style.cursor='pointer'
  // replace "pointer" with other style keyword
} 
</script>

more detail about cursor style, check here

please make sure canvas element rm class a-grab-cursor from canvas

remove with this $('a-frame').classList.remove("a-grab-cursor")

check detail here

if you using 'cursor' component, please disable mouse cursor styles enabled

A-frame show mouse pointer with a function

2 Answers2