A-frame 显示鼠标指针和函数
Posted
技术标签:
【中文标题】A-frame 显示鼠标指针和函数【英文标题】：A-frame show mouse pointer with a function 【发布时间】：2021-08-31 17:12:12 【问题描述】：我目前正在使用一个使用 A 帧 (https://aframe.io) 的场景，我将鼠标指针隐藏在我的场景中。如何创建一些东西，当发出一个函数时，我的鼠标指针会显示，而当另一个函数发生时，我的鼠标指针会隐藏。
目前的错误是我的鼠标指针被隐藏了。我想要这样当一个名为“showPointer”的函数出现时，我的鼠标指针将再次显示，而当一个名为 hidePointer 的函数出现时，我的鼠标指针将再次隐藏。我怎样才能做到这一点。我的职能：
<script>
function hidePointer()
//hide mouse pointer
function showPointer()
//show mouse pointer
</script>
【问题讨论】：
看到这个问题：***.com/questions/1071356/… 我猜这个问题的代码与那个问题完全不同，因为我试图在以 3d 而不是 2d 网页呈现的 webvr 环境中显示或隐藏光标。look-controls="pointerLockEnabled: true;" 有用吗？
不完全是因为我希望能够根据函数显示或隐藏指针，而不是将指针锁保持在隐藏或不隐藏的固定状态，因此它不处于固定状态。跨度>
@Aidan Young：为什么会不一样？
【参考方案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。谢谢！以上是关于A-frame 显示鼠标指针和函数的主要内容，如果未能解决你的问题，请参考以下文章
截图时如何显示鼠标指针，如何带鼠标指针截图，带鼠标指针截图的方法，怎么在截图时把鼠标指针一起截上