javascript - Dat GUI + Three.js 获取用户输入的文本以创建实时更新的 3D 文本几何图形

Question

我正在尝试使用 Dat GUI + Three.js 获取用户输入的文本来创建实时更新的 3D 文本几何图形。到目前为止，我已经能够控制 x、y 和 z 的位置并显示文本输入框。

我无法弄清楚我在文本输入中做错了什么，因此我们将不胜感激

这是我到目前为止所得到的链接:http://nuevil.com/index3.html这是处理 3D 文本几何 + dat GUI 的代码:

var theText = "FEED ME";
var hash = document.location.hash.substr( 1 );
  if ( hash.length !== 0 ) { theText = hash; }

  var text3d = new THREE.TextGeometry( theText, {
    size: 80,
    height: 80,
    curveSegments: 2,
    font: "helvetiker",
    weight: "bold"
  });
  text3d.computeBoundingBox();

  var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );

  var textMaterial = new THREE.MeshNormalMaterial;
  text = new THREE.Mesh( text3d, textMaterial );
  text.position.x = centerOffset;
  text.position.y = 0;
  text.position.z = 0;
  // text.position.z = Math.tan( Date.now() * 2 ) * 20;
  text.rotation.x = 0;
  text.rotation.y = Math.PI * 2;
  parent = new THREE.Object3D();
  parent.add( text );
  scene.add( parent );

  var axes = new THREE.AxisHelper();
  scene.add(axes);


  gui = new dat.GUI();

  parameters = 
  {
    x: 0, y: 30, z: 0,
    color: "#ff0000", // color (change "#" to "0x")
    theText: "",
    opacity: 1, 
    visible: true,
    material: "Phong",
    reset: function() { resetText() }
  };

  var folder1 = gui.addFolder('text');
  var line1 = folder1.add( parameters, 'theText');
  // var line2 = folder1.add( text, '').step(1).listen();
  // var line3 = folder1.add( text, '' ).step(1).listen();
  // folder1.open();

  line1.onChange(function(newValue)
    { theText = newValue});

  var folder2 = gui.addFolder('position');
  var textX = folder2.add( parameters, 'x' ).min(-400).max(200).step(1).listen();
  var textY = folder2.add( parameters, 'y' ).min(0).max(100).step(1).listen();
  var textZ = folder2.add( parameters, 'z' ).min(-200).max(200).step(1).listen();
  // folder2.open();

  var folder3 = gui.addFolder('size');

  textX.onChange(function(value) 
  {   text.position.x = value;   });
  textY.onChange(function(value) 
  {   text.position.y = value;   });
  textZ.onChange(function(value) 
  {   text.position.z = value;   });

Answer 1

您的代码:

line1.onChange(function(newValue)
{ theText = newValue});

对显示文本的网格没有影响。

您需要使用新文本重新定义网格:

line1.onChange(function(newValue)
{ 
    var text3d = new THREE.TextGeometry( newValue, {
        size: 80,
        height: 80,
        curveSegments: 2,
        font: "helvetiker",
        weight: "bold"
      });
      text3d.computeBoundingBox();
      text = new THREE.Mesh( text3d, textMaterial );
 });