THREE.js 如何停止截断二维纹理中的文本 canvas

Question

人们使用这种 2d canvas 纹理方法在 THREE.js 场景中生成文本广告牌、精灵、叠加层似乎很常见，而不是从导入的图像文件中制作纹理，例如Lee Stemkoski's example.

但是，当我对长度超过几个字符的文本字符串尝试这种方法时，完成的图形对象中的文本被截断了。

这是一个JSFiddle

这里是相关代码

function F_Text_Plane_Make_wo_box(text)

{
    var canvas1 = document.createElement('canvas');
    var context1 = canvas1.getContext('2d');
    context1.font = "Bold 40px Arial";
    context1.fillStyle = "rgba(155,0,200,0.95)";
    context1.fillText(text, 0, 50);

    var texture1 = new THREE.Texture(canvas1);
    texture1.needsUpdate = true;

    var material1 = new THREE.MeshBasicMaterial
    ( { map: texture1, side:THREE.DoubleSide } );
    material1.transparent = true;

    var mesh1 = new THREE.Mesh(
        new THREE.PlaneGeometry(canvas1.width, canvas1.height),
        material1
    );
    return mesh1;
}

它发生在 Chrome、Opera 和 Firefox Windows7 笔记本电脑上。

更新

感谢 West Langley 澄清问题。看来我们无法轻松自动地构建一个包含提供的文本字符串且没有尾随白色 space 的平面。可以使用透明度或固定宽度的目标容器来解决此限制。

这是一个JSFiddle

这里是相关代码

//=============================================================================
function F_Text_onto_Plane(text, Tbox_width, Tbox_depth)

{

    var canvas1 = document.createElement('canvas');
    var context1 = canvas1.getContext('2d');

    canvas1.width = Tbox_width; canvas1.height = Tbox_depth;

    context1.font = "Bold 40px Arial"; //... font as big and simple as possible so graphics look smooth

    var metric = context1.measureText(text);
    var text_len_pixels = metric.width;

    //------------ Backing Rectangle ------------
    context1.fillStyle = "rgba(255,255,255,0.95)"; //... White
    //..x1,y1, x2,y2 origin in top left corner x increasing rightwards, y increasing downwards.  
    context1.fillRect(0,0, Tbox_width, Tbox_depth);  //... rectangle matches the Tbox_width and Tbox_depth

    context1.fillStyle = "rgba(255,255,0,0.95)"; //... Yellow, probably change to white in practice.
    context1.fillRect(0,0,5+text_len_pixels+5,Tbox_depth);  //... very good fit to the particular text

    //------------- Paint the Text onto canvas ----------------
    context1.fillStyle = "rgba(0,0,0,1)";//... Black.
    context1.fillText(text , 0+5, Tbox_depth-5);//... text string, start_x, start_y (start point is bottom left of first character).

    //------------------------------------------------
    //... canvas contents will be used for a texture
    //... note this takes the everything within the canvas area, including the canvas background.
    var texture1 = new THREE.Texture(canvas1);
    texture1.needsUpdate = true;

    var material1 = new THREE.MeshLambertMaterial( { map: texture1, side:THREE.DoubleSide } );
    material1.transparent = true;

    var mesh1 = new THREE.Mesh(
        new THREE.PlaneGeometry(Tbox_width, Tbox_depth),
        material1 );

    //... can scale the plane e.g.  mesh1.scale.set(100,50,1.0);
    //... alert ("Checkout: ");
    //... can use .lookat to make plane face a single camera in the scene.
    //... can use THREE.js Sprite to make plane look at all cameras in the scene.

    return mesh1;


}

Answer 1

您需要设置 canvas 宽度：

var canvas1 = document.createElement( 'canvas' );
canvas1.width = 512;
canvas1.height = 64;

var texture1 = new THREE.Texture( canvas1 );
texture1.needsUpdate = true;

var material1 = new THREE.MeshLambertMaterial( {  map: texture1, side:THREE.DoubleSide, transparent = true } );

现在，当您创建网格几何体时，您可以以 world 单位指定其大小，而不是以像素为单位：

var mesh1 = new THREE.Mesh( new THREE.PlaneGeometry( 1024, 128 ), material1 );

three.js r.70

THREE.js 如何停止截断二维纹理中的文本 canvas

THREE.js How to stop truncation of text in texture made from 2D canvas

html

javascript

canvas

three.js