如何在 three.js 中包含 typeface.json 字体文件？

Question

我想使用下面的代码（根据Labelling the vertices in AxisHelper of THREE.js）在我的网站中添加 3D 文本：

var  textGeo = new THREE.TextGeometry('Test', {
                size: 10,
                height: 5,
                curveSegments: 6,
                font: "helvetiker",
                style: "normal"});
var  color = new THREE.Color();
color.setRGB(255, 250, 250);
var  textMaterial = new THREE.MeshBasicMaterial({ color: color });
var  text = new THREE.Mesh(textGeo , textMaterial);
scene.add(text);

这需要在使用文本几何之前包含 helvetiker_regular.typeface.js 字体文件，因为 Three.js 需要它来加载文本几何。

我找到的是 json 文件，例如“helvetiker_regular.typeface.json”(https://github.com/mrdoob/three.js/tree/master/examples/fonts)。

只是 JS 编程的菜鸟。 有人可以告诉我如何包含它以使我的代码正常工作吗？

Answer 1

您需要先使用字体加载器来加载字体：

var fontLoader = new THREE.FontLoader();
fontLoader.load("../path/to/font.json",function(tex){ 
    var  textGeo = new THREE.TextGeometry('Test', {
            size: 10,
            height: 5,
            curveSegments: 6,
            font: tex,
    });
    var  color = new THREE.Color();
    color.setRGB(255, 250, 250);
    var  textMaterial = new THREE.MeshBasicMaterial({ color: color });
    var  text = new THREE.Mesh(textGeo , textMaterial);
    scene.add(text);
})

如果您只想加载一次而不关心再次保留纹理，则类似的方法会起作用。如果您需要保留“tex”对象，您可以在代码中的某个位置预加载它，并使其可供所有未来的 textgeometry 对象访问..