我希望这个盒子在我看它时变成红色,在我看向别处时变成白色。但是,每当光标与立方体重叠时,我都会遇到这种奇怪的闪烁行为。这是该对象的代码:
<a-box position="0.5 0.5 -3" rotation="0 45 0" color="white"
animation__mouseenter="
property: color;
to: #ff0000;
dur: 1;
startEvents: mouseenter;
"
animation__mouseleave="
property: color;
to: #ffffff;
dur: 1;
startEvents: mouseleave;
">
</a-box>
不幸的是,Stack Overflow 不允许我插入演示该问题的 gif,因为它太大了。 我使用的是 Aframe 1.5.0,所以也许您能够重现该问题。
我尝试将
animation
组件更改为 animation__mouseenter
并使用 mouseenter
作为 startEvents。我期望该框在光标看向它的框架处将其颜色更改为红色,保持红色,然后在光标移开的框架处变回白色。
我尝试在场景中使用您的代码,效果很好。我怀疑代码的其他部分有问题,可能与光标/光线投射器有关。 无论如何,这是一个工作示例:
<html>
<head>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!-- <a-entity camera look-controls position="0 1.6 0"> <a-cursor></a-cursor>
</a-entity> -->
<a-entity camera look-controls position="0 1.6 0">
<a-entity
cursor
position="0 0 -1"
geometry="primitive: sphere; radius: 0.005"
material="color: #000000; shader: flat; opacity: 0.5"
>
</a-entity>
</a-entity>
<a-box
position="0.5 0.5 -3"
rotation="0 45 0"
color="white"
animation__mouseenter="
property: color;
to: #ff0000;
dur: 1;
startEvents: mouseenter;
"
animation__mouseleave="
property: color;
to: #ffffff;
dur: 1;
startEvents: mouseleave;
"
>
</a-box>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>