javascript - 具有新创建组件的 A 实体
问题描述
我正在尝试将一个新注册的组件与一个在 a-scene 中提供行为的组件一起包含在内。
首先,我注册了一个组件来更改悬停时的颜色。然后,我注册一个组件来创建一个新的圈子。
当我在 a-scene 中创建实体时,它应该显示悬停行为,但事实并非如此。
<html>
<head>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script>
// here, I register the component to change color on hover
AFRAME.registerComponent('change-color-on-hover', {
schema: {
color: {default: 'red'}
},
init: function () {
var data = this.data;
var el = this.el;
var defaultColor = el.getAttribute('material').color;
el.addEventListener('mouseenter', function () {
el.setAttribute('color', data.color);
});
el.addEventListener('mouseleave', function () {
el.setAttribute('color', defaultColor);
});
}
});
// here, I create new circles that should later show the hover-behavior
AFRAME.registerComponent('newcircle', {
schema: {},
multiple: true,
init: function () {
var sceneEl = document.querySelector('a-scene');
var entityEl = document.createElement('a-ring');
var posit = {x: 1, y: 0.1, z: -1};
entityEl.setAttribute('position', posit);
sceneEl.appendChild(entityEl);
}
});
</script>
</head>
<body>
<a-scene background="color: #000000">
// here, the circle is created and should show the hover-behavior
<a-entity newcircle change-color-on-hover></a-entity>
</a-scene>
</body>
</html>
圆圈已创建,我希望它在悬停时改变颜色,但事实并非如此。你知道为什么吗?
非常感谢你!
解决方案
和事件在空父对象mouseenter
上监听。mouseleave
<a-entity>
如果您将组件添加到环中,那么它应该可以按照您的意愿工作:
// ...
entityEl.setAttribute('position', posit);
entityEl.setAttribute('change-color-on-hover', '')
// ...
在这个小提琴中检查一下。
推荐阅读
- amazon-web-services - AWS Lightsail 与 SSH 连接后显示空白黑屏
- python - TypeError: unhashable type: 'numpy.ndarray' - 尝试绘图时出错
- php - 使用 CURL 从 CRM API 中提取数据引发错误
- node.js - 使用 fs 读取文件我想将变量中的 json 数据传递给 nodejs
- flutter - 如何验证电子邮件或电话或 Null 的颤动文本字段?
- node.js - AWS CodePipeline 不适用于 Github NPM 包?
- hyperledger-fabric - 如何使用 IBM 区块链平台调试 Chaincode
- c# - 使用 Microsoft Graph SDK 从 Azure 应用程序获取所有用户及其角色(包括名称和值)
- javascript - 如何让玩家与墙壁发生碰撞?
- javascript - 在 Gulp 中观看文件时访问许多事件类型的任何触发事件的事件路径