Question

我有以下代码生成一些网格物体。我想在场景中添加三维文字，但是当我这样做时，我收到以下错误：

TypeError：无法读取属性＆＃39; generateShapes＆＃39;未定义的

这是我必须生成网格和3d文本的代码：

var x = 0;
var y = 0;
var finalSize = 450;
var textureLoader = new THREE.TextureLoader();
var fontLoader = new THREE.FontLoader();

var font是未定义的原因？

var font = fontLoader.load( 'css/arial_bold.json');
var fontColor = textMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, overdraw: 0.5 });

for (var i = javascriptProjects.length - 1; i >= 0; i--) {

    var object = {};
    object.scale = javascriptProjects[i].baseImageData["0"] / finalSize;
    var geometry = new THREE.PlaneGeometry(javascriptProjects[i].baseImageData["0"]/object.scale,javascriptProjects[i].baseImageData["1"]/object.scale, 10, 10);
    object.texture = textureLoader.load( "data/"+ javascriptProjects[i].base_image );
    object.material = new THREE.MeshBasicMaterial( { map: object.texture, overdraw: 0.5, transparent: true } );
    object.material.opacity = 0.5;
    object.mesh = new THREE.Mesh(geometry, object.material);

//以下行生成错误

    object.FontGeo = new THREE.TextGeometry( javascriptProjects[i].project_name , {
        font: font,
        size: 50,
        height: 2,
        curveSegments: 12,
        bevelThickness: 1,
        bevelSize: 1,
        bevelEnabled: false
    });
    object.textMesh = new THREE.Mesh( object.FontGeo, fontColor );
    object.textMesh.position.x = object.location.x;
    object.textMesh.position.y = object.location.y;
    object.textMesh.position.z = object.location.z - 100;

    scene.add(object.textMesh);

    object.location = new THREE.Vector3(x, 120, y);
    object.id = "" + javascriptProjects[i].project_id;
    object.mesh.position.x = object.location.x;
    object.mesh.position.y = object.location.y;
    object.mesh.position.z = object.location.z;


    scene.add(object.mesh);
    meshes.push(object.mesh);
    objects.push(object);


    x += 600;
    if(i % 3 == 0){
        y += 600;
        x = 0;
    };
};

显然字体未定义。为什么我不知道我做错了什么。任何建议都会很棒。如果事情不明确，请告诉我。

提前致谢

Answer 1

FontLoader.load()是一个异步函数调用。这就是onLoad回调函数的原因。

在加载font.generateShapes()之前，库正在调用font。

使用类似这样的模式：

var loader = new THREE.FontLoader();
loader.load( 'myFontFile.json', function ( font ) {

    // insert your code here

} );

例如，请参阅this three.js example和three.js documentation。

three.js r.84

three.js fontloader无法读取undefined的generatehapes

1 个答案: