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

Question

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

core:schema:warn Unknown property src for component/system undefined.

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

    <!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 天开始就一直在努力解决这个问题。

Answer 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;
    }
}

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

How to add tags dynamically in Aframe webvr

javascript

webvr

aframe