在 Autodesk Forge 中无法看到 2D 文本精灵

Question

I'm trying to render 2D text using Sprites in the Autodesk Forge viewer, but I can't get it to show up. If I consult the layer by console I see that it contains the created Sprite but nevertheless I can't see it in the scene. I have tried different scaling and position settings but no results.

I attach the code below:

function createText(text, preferencia, tamanyo) {
    
    var sprite = spriteTexto("Prueba texto sprite", preferencia, tamanyo);
    
    if (!NOP_VIEWER.impl.overlayScenes['overlaySprites']) 
        NOP_VIEWER.impl.createOverlayScene('overlaySprites');
    
    NOP_VIEWER.impl.addOverlay('overlaySprites', sprite);
}


function spriteTexto(text, preferencia, tamanyo) {
    
    var fontface = NOP_VIEWER.fontName;
    var fontsize = 18;      //tamanyo
    var borderThickness = 4;
    var borderColor = { r:0, g:0, b:0, a:1.0 };
    var backgroundColor = { r:0, g:0, b:0, a:0.0 };
    var textColor = { r:0, g:0, b:255, a:1 };       //hexadecimalARgb(preferencia.color);

    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.font = "Bold " + fontsize + "px " + fontface;
    var metrics = context.measureText( text );
    var textWidth = metrics.width;

    context.fillStyle   = "rgba(" + backgroundColor.r + "," + backgroundColor.g + "," + backgroundColor.b + "," + backgroundColor.a + ")";
    context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + "," + borderColor.b + "," + borderColor.a + ")";
    context.fillStyle = "rgba(" + textColor.r+", " + textColor.g + ", " + textColor.b + ", 1.0)";
    context.fillText( text, borderThickness, fontsize + borderThickness);

    var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    var spriteMaterial = new THREE.SpriteMaterial( { map: texture, useScreenCoordinates: false } );
    var sprite = new THREE.Sprite( spriteMaterial );
    sprite.scale.set(1*fontsize,1*fontsize,1*fontsize);
    sprite.position.set(5,5,6);
    return sprite;  
}

I would be very grateful if you could help me find the error, thank you very much in advance for your help!

EDIT:------------------------------------------------

We want to render 2D text that can be interacted with (specifically select, rotate, and move).

To do this currently we are working with meshes (using MeshBasicMaterial, Mesh and TextGeometry), but it turns out that the text does not look perfectly sharp, it presents aliasing and we've found that according to the API reference, the antialiasing is not applicable to 2d.

Here are some examples of the problem, as you can see, the more we move away from the plane, the worse the text looks (and even up close it doesn't look perfect):

We were trying to make a test representing the text with Sprites (despite the fact that it would mean having to change the entire implementation already made with meshes) to try to implement it in another way that will solve the problem. But we see that it is not possible either.

How can we correct the rendering of the text then? Is there a way to fix it or is this the most we can get in 2D? We've tried searching for information on this but we haven't find anything helpful.

Answer 1

Unfortunately, Forge Viewer doesn't support THREE.Sprite at present. It uses a self-maintained three.js r71 and removes this support as I know.

Could you share the use case in detail on why you want to use THREE.Sprite with Forge Viewer? If you don't want to share that publicly, you can send it to forge (DOT) help (AT) autodesk (DOT) com .