如何加载字体并使用 TextGeometry 进行渲染

本文介绍了如何加载字体并使用 TextGeometry 进行渲染的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我最近开始研究three.js，现在我面临着文本几何的问题.我使用的是 Three.js 75 版，我使用的是 js/helvetiker_bold.typeface.js 字体.

I recently started working on three.js and now im facing issue on textgeometry.Im using three.js version 75 and i used js/helvetiker_bold.typeface.js font.

var geometry = new THREE.TextGeometry( this.txt, {
  size: this.textSize,
  height: this.textHeight,
  curveSegments: 3,
  font: this.textFont,
  weight: "bold",
  style: "normal",
  bevelEnabled: false
});

由于以下问题，测试未呈现

test is not rendering because of the following issue

1 未捕获的 ReferenceError: _typeface_js 未定义

1 Uncaught ReferenceError: _typeface_js is not defined

2.three.min.js:889 THREE.TextGeometry:字体参数不是THREE.Font的实例

2.three.min.js:889 THREE.TextGeometry: font parameter is not an instance of THREE.Font

谁能帮帮我.

推荐答案

使用此模式加载字体并使用 TextGeometry 进行渲染:

Use this pattern to load a font and render it with TextGeometry:

var loader = new THREE.FontLoader();

loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {

    var textGeo = new THREE.TextGeometry( "My Text", {

        font: font,

        size: 200,
        height: 50,
        curveSegments: 12,

        bevelThickness: 2,
        bevelSize: 5,
        bevelEnabled: true

    } );

    var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000 } );

    var mesh = new THREE.Mesh( textGeo, textMaterial );
    mesh.position.set( x, y, z );

    scene.add( mesh );

} );

three.js r.82

这篇关于如何加载字体并使用 TextGeometry 进行渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！