A-Frame dynamically add objects to a-scene (JS, Html)

Question

I'm trying to add elements to the a-scene tag with innerHTML the following code doesn't work. I would like to make a small world with Perlin Noise 3D I don't want to write code for each block I want to render. Any idea how I can make this work?

<html lang="en">
<head>
    <title>A-Frame</title>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://unpkg.com/perlin-noise-3d"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script>

    </script>
</body>
</head>
<body>


<a-scene id="scene">
</a-scene>

<script>
    $("#scene").innerHTML = '<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>'

</script>

Answer 1

You need to create elements via document.createElement() and append it to the scene with parent.appendChild(node) for them to work properly:

 const scene = document.querySelector("a-scene"); const box = document.createElement("a-box"); box.setAttribute("color", "red"); box.setAttribute("position", "0 1 -3"); scene.appendChild(box);

 <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> <a-scene> </a-scene>

A-Frame dynamically add objects to a-scene (JS, Html)

Question

1 answers

solution1
0 2022-09-19 10:29:41

A-Frame dynamically add objects to a-scene (JS, Html)

Question

1 answers

solution1 0 2022-09-19 10:29:41

solution1
0 2022-09-19 10:29:41