Создание динамического текста с помощью Three.js и dat.gui - PullRequest
Новая
       28

Создание динамического текста с помощью Three.js и dat.gui

0 голосов
/ 13 мая 2018

Я хочу сделать динамический рендеринг введенного пользователем текста с использованием three.js и dat.gui, пока я сделал это для рендеринга текста: 

var displayGui = function(){
  var gui = new dat.GUI();
  var parameters = {
    message:"sample",
    spinVelocity: 0
  }
  //Adds Text controls
  var myText = gui.add(parameters, 'message').name('Text');
  myText.onChange(function () {
      //adds text
      var loader = new THREE.FontLoader();
      loader.load('fonts/OpenSansBold.json', function(font) {
          console.log(myText);
          var textGeo = new THREE.TextGeometry(myText, {
              font: font,
              size: 200,
              height: 50,
              curveSegments: 12,
              position: 3,
              bevelThickness: 2,
              bevelSize: 5,
              bevelEnabled: true,
          });

          var textMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });

          var mesh = new THREE.Mesh(textGeo, textMaterial);
          mesh.position.set(100, 100, 100);
          scene.add(mesh);
      });
  });
  gui.add(parameters, 'spinVelocity').name('Spin');
  gui.open();

  };

Однако, как вы можетесм. здесь , он просто отображает большой красный 3D-текст с надписью [object Object], я подозревал, что это может быть потому, что var myText является объектом, а не строкой, поэтому я попытался String (myText) однако, он не сильно изменился и все равно не работал.

Это не работает, потому что текст не является строкой, или это потому, что three.js не распознает текст, введенный пользователем наинтерфейс dat.gui?

Ответы [ 2 ]

0 голосов
/ 13 мая 2018

Вы не должны пытаться загружать шрифт каждый раз, когда ваш dat.gui срабатывает. В вашем коде ужасная проблема с производительностью, и, скорее всего, вам не хватит памяти, если вы поиграете с графическим интерфейсом некоторое время.

Насколько я понимаю, этот код создает новый экземпляр геометрии каждый раз, когда вы изменяете значение в графическом интерфейсе, и никогда не избавляется от них. Вы заполняете свой GPU копиями этой сетки.

Специфично для вашего вопроса, вы неправильно используете datgui: 

console.log(myText); //logs the intance of a gui object (a JS object with methods and such)

изменить на: 

console.log(parameters.message);

Чтобы исправить проблему с перезагрузкой, кешируйте ваш шрифт 

var myFont
loader.load('fonts/OpenSansBold.json', function(font) {
   myFont = font
   //your gui is not ready until the font comes so, for example you could instantiate it here
   gui.add(...).onChange(function(){..})
})
0 голосов
/ 13 мая 2018

Смена строки 

myText.onChange(function () {

до 

myText.onChange(function (value) {

Тогда значение будет содержать новое значение ввода.

...