无法在三.js场景中创建 3D 文本

Question

我可以在Three.js场景中创建和渲染除Text之外的任何基元。我使用名为helvetiker_bold的字体，它位于index.html文件所在的同一目录中。这是一个代码：

// index.html
var uploader = new THREE.FontLoader();
uploader.load( '/helvetiker_bold.typeface.json', ( font ) => {
options = {
size: 80,
height: 5,
weight: 'normal',
font: font,
style: 'normal',
bevelThickness: 2,
bevelSize: 4,
bevelSegments: 3,
bevelEnabled: true,
curveSegments: 12,
steps: 2
};
textGeo = new THREE.TextGeometry( "Motion Graphics", options );
material = new THREE.MeshNormalMaterial();
textMesh = new THREE.Mesh( textGeo, material );
textMesh.position.z = -2;
textMesh.scale.set(0.2, 0.2, 0.2)
scene.add( textMesh );
});

我的代码出了什么问题？为什么我不能生成三维文本？

Answer 1

我遇到的问题现在已经解决了。首先，我将helvetiker_bold.typeface.json字体文件放在index.html文件所在的同一目录中。今天，我把一个字体文件拖到另一个名为docsDir的文件夹中，并稍微重构了我的代码：

var loader = new THREE.FontLoader();
loader.load( '/docsDir/helvetiker_bold.typeface.json', function ( font ) {
var textGeo = new THREE.TextGeometry( 'Motion Graphics', {
font: font,
size: 40,
height: 20,
curveSegments: 10,
bevelEnabled: true,
bevelThickness: 5,
bevelSize: 2,
bevelOffset: 0,
bevelSegments: 5   
});
var textMaterial = new THREE.MeshNormalMaterial();
var textMesh = new THREE.Mesh( textGeo, textMaterial );
scene.add( textMesh );
});

现在它按预期工作。我的三维文本在场景中渲染。