如何制作一个可以改变文本在a帧场景中位置的按钮？

Question

有多种形式可以在框架中添加文本。如何制作将改变场景文本位置的按钮？ 将有2个“直接”，“成圆圈”按钮，这些按钮将更改文本在a帧场景中的位置。例如，场景中的文本将显示为圆形

function createTextArea(wrapper) {
  const newTextArea = $(`<div><textarea type="text" value="text" name="fname" class="inputText" cols="20" rows="3"></textarea><input class="sendButton" type="submit" value="Отправить" /></div>`); 
  wrapper.append(newTextArea);
  const inputText = newTextArea.find(".inputText");
  const sendButton = newTextArea.find(".sendButton");
 
  var aframeWrapper = document.getElementById("text-container");
  const index = aframeWrapper.children.length;
  var position = new THREE.Vector3(index * -1.1, 0, 0);
  var newText = document.createElement("a-entity");
  newText.setAttribute("position", position);
  newText.setAttribute("text", {
    color: "white",
    align: "center",
    value: `output${index}`
  });
  aframeWrapper.appendChild(newText);

  sendButton.click(e => {
    e.preventDefault();
    newText.setAttribute("text", "value", inputText.val());
  });
}

$(document).ready(function() {
  var wrapper = $(".container1");
  var max_fields = 10;
  var add_button = $(".add_form_field");

  // create initial text area
  createTextArea(wrapper);

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      createTextArea(wrapper);
    } else {
      alert('You Reached the limits')
    }
  });

  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});
/*$("button").click(function(e) {
    if (textArray.length < 2) {
     return
   }
   textArray.unshift(textArray[textArray.length - 1])
		textArray.pop()
    for (let i = 0; i < textArray.length; i++) {
      let y = (i === textArray.length - 1) ? 0 : (i + 1)
      let newPos = new THREE.Vector3(0, y * -0.05, 0)
      textArray[i].setAttribute('position', newPos)
    }
  })*/

.container {
  position: absolute;
  z-index: 1;
  background: white;
  padding: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<div class='container'>
	   <button >Directly</button>
                  <button>In a circle</button>
				  
				  <button>Scene</button>
<div class="prokrutka">		     
<div class="container1">
<button class="add_form_field">Add New Field &nbsp; <span style="font-size:16px; font-weight:bold;">+ </span></button>
<div></div>
</div>
</div>
</div></div>
<a-scene background="color: black" move-text>
  <a-entity id='text-container' position="0 1.6 -0.5">
    <a-entity id="output" text="value: output; align: center;" position="0 0 0"></a-entity>
  </a-entity>
</a-scene>