A-frame 显示具有功能的鼠标指针

如何解决A-frame 显示具有功能的鼠标指针

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

目前的错误是我的鼠标指针被隐藏了。我想要这样，当一个名为“showPointer”的函数发生时，我的鼠标指针将再次显示，当一个名为 hidePointer 的函数发生时，我的鼠标指针将再次隐藏。我怎样才能做到这一点。我的职能：

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

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

解决方法

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>

XX

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

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

用这个 <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

如果您使用“光标”组件，请禁用mouse cursor styles enabled