Spawning elements for A-frame

Question

I am trying to add the the bubble function to the scene which creates a sphere, but nothing appears. Also when I try to create a sphere without using the bubble function, nothing appears on the scene.

    function appear(){
      return bubble({x:0,y:5,z:2},"red",{x:270,y:100,z:70})
    }

    function bubble(pos, color, rotation){
      let wrapper = document.createElement("a-entity");

      wrapper.object3D.rotation.set(
        (rotation.x * Math.PI) / 180.0,
        (rotation.y * Math.PI) / 180.0,
        (rotation.z * Math.PI) / 180.0
      );
      let bubble = document.createElement("a-sphere");
      bubble.object3D.position.set(pos.x, pos.y, pos.z);
      bubble.setAttribute("color", color);
      bubble.setAttribute("shadow", "");`your text`
      wrapper.appendChild(bubble);
      return wrapper;
    }
   const scene = document.querySelector("a-scene");
   const box = document.createElement("a-box");
   box.setAttribute("color", "red");
   box.setAttribute("position", "0 5 1");
   scene.appendChild(box)
   scene.addEventListener("loaded", () => {
      
      appear()
    });

I have tried both ways and nothing seems to appear. There is no error so I think it's probably a logic error some where.

Answer 1

You don't append the wrapper to the scene, so it's not a part of it:

// basically your code, my input is with a comment down below
function appear() {
  return bubble({ x: 0, y: 1, z: -2}, "red", {x: 270, y: 100, z: 70})
}

function bubble(pos, color, rotation) {
  let wrapper = document.createElement("a-entity");
  wrapper.object3D.rotation.set(
    (rotation.x * Math.PI) / 180.0,
    (rotation.y * Math.PI) / 180.0,
    (rotation.z * Math.PI) / 180.0
  );
  let bubble = document.createElement("a-sphere");
  bubble.object3D.position.set(pos.x, pos.y, pos.z);
  bubble.setAttribute("color", color);
  bubble.setAttribute("shadow", "");
  wrapper.appendChild(bubble);
  return wrapper;
}

const scene = document.querySelector("a-scene");
scene.addEventListener("loaded", () => {
  const element = appear(); // retrieve the object
  scene.appendChild(element); // append it to the scene
});

<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<a-scene>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>