New Programmer New Programmer - 1 year ago 148
Javascript Question

How to add tags dynamically in Aframe webvr

What i want to do is on Click of a image i want to dynamically add a image on the scene. The problem is that the tag gets added but i am not able to attach a src attribute to it. I get this warning

core:schema:warn Unknown property
for component/system

What i want to do is when i click on the image i want a image to dynamically appear and when i click again it should be destroyed. Also i want to add a animation when the image is inserted like a fade in effect. Here is my code

<!DOCTYPE html>
<meta charset="utf-8">
<script src="aframe.min.js"></script>
<title>Web VR</title>
<img id="sky" src="sky.jpg">
<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">

var a=document.getElementById('a');
var b=document. createElement('a-image');
b.setAttribute('position','0 3.8 3.8');

I would also really appreciate if someone could show me how to add the animation effect. Am just learning webvr and have been trying to figure this out since 3 days.

Answer Source

I encountered this problem before, and the solution is twofold :

  1. You need to wrap your a-scene manipulation code inside a window.load event
  2. You need to slightly adjust the format of your .setAttribute() call.

    window.addEventListener("load", initAFrame);
    let addedImage;
    function initAFrame(){
        let a = document.getElementById("a");
        a.addEventListener("click", createDestroyImage.bind(true, a));
    function createDestroyImage(a){
            addedImage = null;
        } else {
            let b = document.createElement("a-image");
            b.setAttribute("position", {
                "x" : 0,
                "y" : 3.8,
                "z" : 3.8
            addedImage = b;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download