A-frame显示鼠标指针的函数

Question

我目前正在使用一个使用 A 帧 (https://aframe.io) 的场景，我将鼠标指针隐藏在我的场景中。我怎样才能创建一些东西，当一个函数发出时，我的鼠标指针会显示，当另一个函数出现时，我的鼠标指针会隐藏。

目前的故障是我的鼠标指针被隐藏了。我想要它，以便当一个名为“showPointer”的函数出现时，我的鼠标指针将再次显示，而当一个名为 hidePointer 的函数出现时，我的鼠标指针将再次隐藏。我怎样才能做到这一点。我的职能：

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

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

Answer 1

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>

Answer 2

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

有关光标样式的更多详细信息，请查看 here

请确保 canvas 元素 rm class a-grab-cursor from canvas

删除 $('a-frame').classList.remove("a-grab-cursor")

查看详情here

如果您使用 'cursor' 组件，请禁用 mouse cursor styles enabled

A-frame显示鼠标指针的函数

A-frame show mouse pointer with a function

javascript

jquery

three.js

webvr

aframe