时间戳

首页 > 解决方案 > 无法在 Three.js 场景中创建 3D 文本

javascript - 无法在 Three.js 场景中创建 3D 文本

问题描述

我可以在场景中创建和渲染任何图元，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 );
});

我的代码有什么问题？为什么我不能生成 3D 文本？

标签： javascriptthree.js

解决方案

我遇到的问题现在已经解决了。起初我将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 );
});

现在它按预期工作。我的 3D 文本在场景中呈现。

推荐阅读