參見three.js-dev\examples\webgl_geometry_text.html

1. 添加觸發(fā)時(shí)間函數(shù)

   document.addEventListener( 'keypress', onDocumentKeyPress ) ;? ? ? ?document.addEventListener( 'keydown', onDocumentKeyDown );

2. onDocumentKeyPress

function onDocumentKeyPress( event ) {

const keyCode = event.which;

// backspace

if ( keyCode == 8 ) {

event.preventDefault(); //阻止系統(tǒng)默認(rèn)行文

} else {

const ch = String.fromCharCode( keyCode );

text += ch;

}

}

3.?onDocumentKeyDown

function onDocumentKeyDown( event ) {

if ( firstLetter ) {

firstLetter = false;

text = '';? //保存輸入文本

}

const keyCode = event.keyCode;

// backspace

if ( keyCode == 8 ) {

event.preventDefault();

text = text.substring( 0, text.length - 1 );//刪除最后一個(gè)字符

return false;

}

}

4.?createText?顯示文字

function createText() {

textGeo = new TextGeometry( text, {

font: font,

size: 70,????//字大小

height: 10, //立體字，0為平面

curveSegments: curveSegments,

bevelThickness: bevelThickness,

bevelSize: 1.5, //傾斜

bevelEnabled: bevelEnabled? //是否啟用傾斜

} );

textGeo.computeBoundingBox();

const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );

textMesh1 = new THREE.Mesh( textGeo, materials );

textMesh1.position.x = centerOffset;

textMesh1.position.y = hover;

textMesh1.position.z = 0;

textMesh1.rotation.x = 0;

textMesh1.rotation.y = Math.PI*2;

group.add( textMesh1 );

}