Как сделать так, чтобы кнопка меняла текстовые элементы на сцене? - PullRequest
Новая
       5

Как сделать так, чтобы кнопка меняла текстовые элементы на сцене?

0 голосов
/ 04 января 2019

Существуют формы добавления текста в рамку. Как сделать кнопки, которые будут менять свое положение на сцене?

Например, будет 2 кнопки, которые изменяют положение текста по кругу или в одной строке. Есть небольшой код "позиция", но я не знаю, как его добавить и подключить к </ a-entity> 

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>

1 Ответ

0 голосов
/ 04 января 2019

Вы можете хранить текстовые элементы в массиве 

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)
}

Вы можете проверить это в этой скрипке .

...