ThreeJs 2d 画布文本渲染内存问题

Question

我正在渲染近 200 个文本，我正在使用 2D 画布渲染。它需要更多的内存，有没有办法重用画布元素。以下是我的工作代码。

var goalCanvas = document.createElement('canvas');
goalCanvas.width = Math.pow(2, Math.round(Math.log(parseInt(name.length) * parseInt(58)) / Math.log(2)));
goalCanvas.height = 128;
var planeGeometry = new THREE.PlaneGeometry(parseInt(name.length) * parseInt(3), 8);
var featureContext = goalCanvas.getContext('2d');
featureContext.fillStyle = "#ffffff";
featureContext.font = "54px roboto_condensedregular";
featureContext.textAlign = "center";
featureContext.fillText(name, goalCanvas.width / 2, 42);
var goalTexture = new THREE.Texture(goalCanvas)
goalTexture.needsUpdate = true;
var goalMaterial = new THREE.MeshBasicMaterial({
    map: goalTexture
});
goalMaterial.transparent = true;
var goalNameMesh = new THREE.Mesh(
    planeGeometry,
    goalMaterial
);

Answer 1

新画布的创建只能发生一次，只运行实际添加文本的代码：

var planeGeometry = new THREE.PlaneGeometry(parseInt(name.length) * parseInt(3), 8);
goalCanvas.height = 128;
var featureContext = goalCanvas.getContext('2d');
featureContext.fillStyle = "#ffffff";
featureContext.font = "54px roboto_condensedregular";
featureContext.textAlign = "center";
featureContext.fillText(name, goalCanvas.width / 2, 42);
var goalTexture = new THREE.Texture(goalCanvas)
goalTexture.needsUpdate = true;
var goalMaterial = new THREE.MeshBasicMaterial({
    map: goalTexture
});
goalMaterial.transparent = true;
var goalNameMesh = new THREE.Mesh(
    planeGeometry,
    goalMaterial
);

如果你在函数中使用它，它应该看起来像这样：

function AddText(canvas,name)
{
    var planeGeometry = new THREE.PlaneGeometry(parseInt(name.length) * parseInt(3), 8);
    var featureContext = canvas.getContext('2d');
    featureContext.fillStyle = "#ffffff";
    featureContext.font = "54px roboto_condensedregular";
    featureContext.textAlign = "center";
    featureContext.fillText(name, canvas.width / 2, 42);
    var goalTexture = new THREE.Texture(canvas)
    goalTexture.needsUpdate = true;
    var goalMaterial = new THREE.MeshBasicMaterial({
        map: goalTexture
    });
    goalMaterial.transparent = true;
    var goalNameMesh = new THREE.Mesh(
        planeGeometry,
        goalMaterial
    );
    return {"goalNameMesh": goalNameMesh, "goalTexture": goalTexture, "goalMaterial":goalMaterial, "featureContext": featureContext};
}


var goalCanvas = document.createElement('canvas'); //this should only run once
goalCanvas.width = Math.pow(2, Math.round(Math.log(parseInt(name.length) * parseInt(58)) / Math.log(2)));//and this
goalCanvas.height = 128;//and this
var addedText = AddText(goalCanvas, name) //you can loop this line for each text that you want to add, and it will return an object with all the handles in it