Question

我最近开始研究three.js，现在我正面临文本几何问题。我使用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：font参数不是THREE.Font的实例

任何人都可以帮助我。

Answer 1

使用此模式加载字体并使用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

Answer 2

您不需要使用FontLoader，只需将json加载为：

const fontJson = require( "./fonts/gentilis_bold.typeface.json" );

const font = new THREE.Font( fontJson );

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

2 个答案: