如何在 Aframe webvr 中动态添加标签答案

【问题标题】：How to add tags dynamically in Aframe webvr如何在 Aframe webvr 中动态添加标签
【发布时间】：2016-11-04 18:59:59
【问题描述】：

我想要做的是点击我想在场景中动态添加图像的图像。问题是添加了标签，但我无法为其附加 src 属性。我收到此警告

core:schema:warn 组件/系统 undefined 的未知属性 src。

我想要做的是，当我单击图像时，我希望图像动态显示，当我再次单击时，它应该被销毁。我还想在插入图像时添加动画，就像淡入效果一样。这是我的代码

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="aframe.min.js"></script>
    <title>Web VR</title>
</head>
<body>
    <a-scene>
        <a-assets>
            <img id="sky" src="sky.jpg">    
        </a-assets>
        <a-sky color="lightblue"></a-sky>
        <a-image id="a" src="aboutus.jpg" position="0 1.25 -4"></a-image>
        <a-camera position="0 0 3.8">
        <a-cursor id="cursor" color="red">
        </a-cursor>
        </a-camera>
    </a-scene>

<script>
var a=document.getElementById('a');
a.addEventListener('click',function(){
    var b=document. createElement('a-image');
    b.setAttribute('position','0 3.8 3.8');
    b.setAttribute('src','aboutus.jpg');
    a.appendChild(b);
});
</script>
</body>
</html>

如果有人能告诉我如何添加动画效果，我也非常感激。我刚刚学习 webvr，并且从 3 天以来一直在尝试解决这个问题。

【问题讨论】：

好的，我使用 document.createElementNS('','a-image');但是现在遇到的问题是我看不到它。在控制台中，如果我检查它被添加到现有下面但我看不到图片。

标签： javascript aframe webvr

【解决方案1】：

我之前遇到过这个问题，解决方法是双重的：

您需要将您的场景操作代码包装在 window.load 事件中

您需要稍微调整 .setAttribute() 调用的格式。

window.addEventListener("load", initAFrame);

let addedImage;

function initAFrame(){

    let a = document.getElementById("a");
    a.addEventListener("click", createDestroyImage.bind(true, a));

}

function createDestroyImage(a){

    if(addedImage){
        a.removeChild(addedImage);
        addedImage = null;
    } else {
        let b = document.createElement("a-image");
        b.setAttribute("position", {
            "x" : 0,
            "y" : 3.8,
            "z" : 3.8
        });
        a.appendChild(b);
        addedImage = b;
    }
}

【讨论】：

非常感谢@PookageHayes。这非常有效。只是我必须像这样更改位置属性 b.setAttribute('position','0 3.8 3.8');我已更改代码以包含以下内容，并且运行良好。 b.setAttribute('位置','3 1.25 -4'); b.setAttribute("src","aboutus.jpg") 还有一种方法可以在它来来去去时为其设置动画吗？这对我很有帮助。
您可能需要查看实体。玩一玩，有问题就回来！ aframe.io/docs/0.3.0/core/animations.html#sidebar
在 else 语句中，我添加了另一个元素 a-animation 并设置了以下属性。 c.setAttribute("id","a-ani"); c.setAttribute("开始",""); c.setAttribute("easing","ease-in"); c.setAttribute("属性","比例"); c.setAttribute("从","0 0 0"); c.setAttribute("to","2 2 2"); c.setAttribute("dur","1000");然后我将它作为一个孩子附加到 a-image。当图像在点击时创建时，这工作正常。我得到的效果就像它放大到存在一样。但是在删除图像时，即再次单击时，我无法获得相同的反向效果。我在 if 中添加了反向代码
那是因为在动画播放之前元素被移除了——你可以通过添加一个 setTimeout 来等待动画完成，或者添加一个 'animationend' 监听器来解决这个问题。动画，并仅在触发时删除元素。
我添加了setTimeout函数并尝试了。它在被销毁之前等待 1000 毫秒，但仍然没有动画。也许我应该在 begin 属性中写一些具体的东西？