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

Question

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

core：schema：warn组件/系统的未知属性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 个解决方案

解决方案1
1 已采纳 2016-11-04 10:59:59

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-11-04 10:59:59

解决方案1
1 已采纳 2016-11-04 10:59:59