A-frame 显示鼠标指针和函数答案

【问题标题】：A-frame show mouse pointer with a functionA-frame 显示鼠标指针和函数
【发布时间】：2021-08-31 17:12:12
【问题描述】：

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

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

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

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

【问题讨论】：

看到这个问题：stackoverflow.com/questions/1071356/…
我猜这个问题的代码与那个问题完全不同，因为我试图在以 3d 而不是 2d 网页呈现的 webvr 环境中显示或隐藏光标。
look-controls="pointerLockEnabled: true;" 有用吗？
不完全是因为我希望能够根据函数显示或隐藏指针，而不是将指针锁保持在隐藏或不隐藏的固定状态，因此它不处于固定状态。跨度>
@Aidan Young：为什么会不一样？

标签： javascript jquery three.js aframe webvr

【解决方案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>

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

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

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

查看详情here

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

【讨论】：

【解决方案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>

【讨论】：

该代码完美运行，但使用 css 隐藏光标并且不隐藏函数上的光标。我需要使用 javascript 函数隐藏光标。当函数发生时，光标应该被隐藏，当另一个函数发生时，光标应该再次显示。
Javascript 没有隐藏光标的 API（据我所知），它在 css 属性 cursor 中设置为“none”。即使在 A-frame 中，当您应用 look-controls="pointerLockEnabled: true;" 时，他们也会使用 set canvasElement.style.cursor = 'none'
我试图做相反的事情，但是我想一直隐藏我的光标，但是当我点击场景中的一个对象时，会触发一个 2d 弹出窗口。我想知道如何将光标隐藏为默认值，因此当我将鼠标悬停在弹出窗口上时，该弹出窗口是一个具有 Popup1 类的 div，光标应该显示。
检查解决方案，我已更改它。 I want to hide my cursor at all times => 光标：无； css-property 位于 html 页面的 body 元素上（这意味着光标始终隐藏）=> 弹出窗口可以是具有位置的 div：absolute;当 mouseenter/mouseleave 事件在你显示的 div 顶部触发时隐藏光标，请检查修改后的 sn-p。谢谢！