Question

我正在尝试使用Dat GUI + Three.js来获取用户输入的文本以创建实时更新的3d文本几何体。到目前为止，我已经能够获得位置x，y和amp;要控制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 );
 });

Answer 2

文本变量通过画布传递 - 通过字体库 - 不在THREE.TextGeometry中生成，因此我创建了一个函数，以便在输入值时，每次都将它们提供给新的文本网格。我想在gui中添加更新功能或刷新功能，以便用户选择擦除旧网格。

 line1.onFinishChange(function(newValue)
{ 
  function createtext(){
      var hash = document.location.hash.substr( 1 );
  if ( hash.length !== 0 ) { newValue = hash; }
  var text3d = new THREE.TextGeometry( newValue, {
    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);

  }
     createtext();
 });

Dat GUI + Three.js获取用户输入的文本以创建实时更新的3d文本几何体

2 个答案: