A-frame show mouse pointer with a function

user_15930096 0
Viewed 253

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>
aframe webvr three.js jquery javascript
2 Answers

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>

user_85230130 
<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

user_92662000
Related