悬停在aframe实体中的动画
悬停在aframe实体中的动画
提问于 2019-02-20 19:49:42
我在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>-联署材料：
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
Stack Overflow用户
回答已采纳
发布于 2019-02-20 22:04:26
这里有两个问题：
1)如果您想使用document.querySelector('#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>中。小提琴这里.
这是必要的，因为jsfiddle在加载窗口时执行代码部分。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54794214
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号