Question

我想要做的是单击我想在场景上动态添加图像的图像。问题是标签被添加但我无法附加src属性。我收到了这个警告

core：schema：警告组件/系统src的未知属性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，并且一直试图解决这个问题。

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中动态添加标签

1 个答案: