3

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

core:schema:warnsrc组件/系统的未知属性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 天以来一直试图解决这个问题。

4

1 回答 1

1

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

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

  2. 您需要稍微调整 .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;
    }
}
于 2016-11-04T10:59:59.833 回答