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);

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

我发现的是json文件，例如＆＃34; helvetiker_regular.typeface.json＆＃34; （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”对象，你可以在代码中的某个地方预加载它，并让它可以访问所有未来的文本几何对象..

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

1 个答案: