我在AFRAME元素/实体中制作动画有麻烦。在下面的演示中，我已经设置了一个框，并且在框的顶部有一个文本实体，当我将鼠标悬停在框上时，文本元素不会动画显示（向上扩展）。有人可以帮忙吗？
https://jsfiddle.net/0d6ymk21/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="camera" camera mouse-cursor look-controls>
<a-cursor fuse="true" color="blue"></a-cursor>
</a-entity>
<a-entity
id="#fernando"
text="color: black;value: Fernando;"
scale=".1 .1 .1"
position="2 1 -2"
></a-entity>
<a-box box position="1 0 -2" color="red" activate-name=""></a-box>
</a-scene>
</body>
</html>
- JS：
AFRAME.registerComponent("activate-name", {
schema: {
default: ""
},
init: function() {
var data = this.data;
var el = this.el;
var fernando = document.querySelector("#fernando");
el.addEventListener("mouseenter", function() {
fernando.setAttribute("scale", "2 2 2");
});
}
});
这里有两个问题：
1）如果你想使用document.querySelector('#fernando')抓住fernando - id必须是fernando而不是#fernando。
2）组件声明 - 在这种情况下是activate-name - 需要在组件附加到html之前完成。你可以简单地在场景之前把它扔到<script>标签上
<script>
AFRAME.registerComponent('foo', ...
</script>
<a-scene>
<a-entity foo></a-entity>
</a-scene>
甚至更好 - 将它保存在一个单独的.js文件中，并将其包含在<head>中。小提琴here。
这是必要的，因为jsfiddle在加载窗口时执行代码部分。