使用 A-frame 实现鼠标指针显示功能的方法。

Question

使用 A-frame 实现鼠标指针显示功能的方法。

8

我目前正在使用A-frame (https://aframe.io)场景，其中我隐藏了场景中的鼠标指针。如何创建一个功能，使得当发出“showPointer”函数时，我的鼠标指针会显示，当发生另一个函数时，“hidePointer”函数，我的鼠标指针将再次隐藏。

当前默认情况下，我的鼠标指针被隐藏。我希望当调用“showPointer”函数时，我的鼠标指针将再次显示，并且当调用“hidePointer”函数时，我的鼠标指针将再次隐藏。我应该怎么做？我的函数：

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

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

- Aidan Young

1

请参阅此问题：https://dev59.com/enNA5IYBdhLWcg3wKaYx - JosephDaSilva

我猜测这个问题的代码与那个问题完全不同，因为我正在尝试在渲染为3D的WebVR环境中显示或隐藏光标，而不是2D网页。 - Aidan Young

look-controls="pointerLockEnabled: true;" 有帮助吗？ - Lajos Arpad

并不是因为我想保持指针锁定在隐藏或非隐藏的固定状态，而是我希望能够根据函数显示或隐藏指针，以便它不处于固定状态。 - Aidan Young

JavaScript本身无法隐藏您的光标，这是一种样式。 - JavaScript

显示剩余2条评论

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ryanaltair · Answer 1

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

关于光标样式的更多细节，请查看此处

请确保从 canvas 元素中删除 a-grab-cursor 类

使用以下代码删除：$('a-frame').classList.remove("a-grab-cursor")

详见此处

如果您使用“cursor”组件，请禁用启用鼠标光标样式

- Ibrahim W. · Answer 2

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>