1

我正在尝试使用 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;   });
4

2 回答 2

0

你的代码：

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 );
 });
于 2014-02-11T13:48:41.510 回答
0

文本变量是通过画布传递的——通过字体库——不是在 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();
 });
于 2014-02-12T15:33:51.060 回答