WEBGL

您所在的位置:网站首页 webgl文本渲染 WEBGL

WEBGL

2023-03-22 22:47| 来源: 网络整理| 查看: 265

参见three.js-dev\examples\webgl_geometry_text.html

添加触发时间函数

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

2. onDocumentKeyPress

function onDocumentKeyPress( event ) {

const keyCode = event.which;

// backspace

if ( keyCode == 8 ) {

event.preventDefault(); //阻止系统默认行文

} 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 );//删除最后一个字符

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 );

}



【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3