Trying to utilize the combination of Dat GUI and Three.js to allow for user inputted text to generate 3D text geometry that updates in real time. Successfully achieved control over the x, y, and z positions, as well as displaying the text input box.
Struggling to identify the issue with the text input functionality, any assistance would be greatly appreciated.
Here is what has been accomplished so far: and here is the code dealing with the 3D text geometry and 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; });