javascript - 如何加载字体并使用 TextGeometry 渲染它

Question

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

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

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

1 未捕获的 ReferenceError:_typeface_js 未定义

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

谁能帮帮我。

Answer 1

使用像这样的模式加载字体并使用 TextGeometry 渲染它:

import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';

...

const loader = new FontLoader();

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

    const textGeo = new TextGeometry( "My Text", {

        font: font,

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

        bevelThickness: 2,
        bevelSize: 5,
        bevelEnabled: true

    } );

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

    const mesh = new THREE.Mesh( textGeo, textMaterial );
    mesh.position.set( 0, 0, 10 );

    scene.add( mesh );

} );

three.js r.147