Question

有多种形式可以在框架中添加文本。如何制作可以改变其在场景中位置的按钮？

例如，将有2个按钮可更改文本在圆圈或单行中的位置。有一个小的代码“位置”，但我不知道如何添加它并将其连接到

var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );



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--;
  })
});

form {
  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="container1">
  <form name="myForm" href="" onsubmit="text1" height="440">
    <div class="container1">
      <button class="add_form_field">Add New Field &nbsp; 
      <span style="font-size:4px; font-weight:bold;">+</span></button>
      <div><input type="text" name="mytext[]" /></div>
    </div>
  </form>
</div>


<a-scene background="color: black">
  <a-entity id='text-container' position="0 1.6 -0.5"></a-entity>
  <a-camera position="0 1.6 1"></a-camera>
</a-scene>

Answer 1

您可以将文本元素存储在数组中

let textArray = []
$("#text1").click(function(e) {
  // .....
  wrapper.appendChild(newText)
  textArray.unshift(newText)
  // .....

在任何情况下（单击按钮，按下箭头）都将移动数组中的元素并为其赋予新位置：

// move the array hovever you want
textArray.unshift(textArray[textArray.length - 1])
textArray.pop()

// move the elements - each one one further down, and the last one on the first position:
for (let i = 0; i < textArray.length; i++) {
  let y = (i === textArray.length - 1) ? 0 : (i + 1) // the last one one on position 0
  let newPos = new THREE.Vector3(0, y * -0.05, 0)
  textArray[i].setAttribute('position', newPos)
}

您可以在此fiddle中进行检查。

如何使舞台上的按钮更改文本项？

1 个答案: