DREI Js beste Leistung Weg, um die Textur zu aktualisieren Leinwand

Question

Ich habe THREE.Points mit THREE.PointsMaterial. Als map verwende ich generierte dynamische cavas Bild. Ich muss canvas auf jedem Rahmen neu rendern.

mein Teil des Codes:

function makeEnemyBaseLabel(n,d) { 
       var canvas = document.createElement('canvas'); 
       var context= canvas.getContext("2d"); 
       var w = 5; 
        context.canvas.width = context.canvas.height = 128; 

        context.fillStyle = 'rgba(255,255,255,0.4)'; 
        context.strokeStyle = 'rgba(255,255,255,0.5)'; 

        context.beginPath(); 
        context.moveTo(64-(w/2),64-w); 
        context.lineTo(64-w,64-w); 
        context.lineTo(64-w,64-(w/2)); 
        context.stroke(); 
        context.beginPath(); 
        context.moveTo(64-w,64+(w/2)); 
        context.lineTo(64-w,64+w); 
        context.lineTo(64-(w/2),64+w); 
        context.stroke(); 
        context.beginPath(); 
        context.moveTo(64+(w/2),64+w); 
        context.lineTo(64+w,64+w); 
        context.lineTo(64+w,64+(w/2)); 
        context.stroke(); 
        context.beginPath(); 
        context.moveTo(64+w,64-(w/2)); 
        context.lineTo(64+w,64-w); 
        context.lineTo(64+(w/2),64-w); 
        context.stroke(); 


         context.textAlign="center"; 
         context.font = "Normal 10px Sans-Serif"; 
         context.fillText(formatDistance(d), 64, 85); 



       var texture = new THREE.Texture(canvas); 
        texture.needsUpdate = true; 
        return new THREE.PointsMaterial({ visible: true, size: 128, color: 0xffffff, depthTest: false, depthWrite: false, opacity: 1, sizeAttenuation: false, transparent: true, map: texture }); 

} 
function updateEnemyBaseLabel(n,d,o) { 
       var canvas = document.createElement('canvas'); 
       var context= canvas.getContext("2d"); 
       var w = 5; 
        context.canvas.width = context.canvas.height = 128; 


        if(d < 100) { 
         context.fillStyle = 'rgba(255,255,255,1)'; 
         context.strokeStyle = 'rgba(255,255,255,1)'; 
        } else 
        if(d < 1000) { 
         context.fillStyle = 'rgba(255,255,255,0.6)'; 
         context.strokeStyle = 'rgba(255,255,255,0.7)'; 
        } else { 
         context.fillStyle = 'rgba(255,255,255,0.4)'; 
         context.strokeStyle = 'rgba(255,255,255,0.5)'; 
        } 

        context.beginPath(); 
        context.moveTo(64-(w/2),64-w); 
        context.lineTo(64-w,64-w); 
        context.lineTo(64-w,64-(w/2)); 
        context.stroke(); 
        context.beginPath(); 
        context.moveTo(64-w,64+(w/2)); 
        context.lineTo(64-w,64+w); 
        context.lineTo(64-(w/2),64+w); 
        context.stroke(); 
        context.beginPath(); 
        context.moveTo(64+(w/2),64+w); 
        context.lineTo(64+w,64+w); 
        context.lineTo(64+w,64+(w/2)); 
        context.stroke(); 
        context.beginPath(); 
        context.moveTo(64+w,64-(w/2)); 
        context.lineTo(64+w,64-w); 
        context.lineTo(64+(w/2),64-w); 
        context.stroke(); 


         context.textAlign="center"; 
         context.font = "Normal 10px Sans-Serif"; 
         context.fillText(formatDistance(d), 64, 85); 


        var texture = new THREE.Texture(canvas); 
         texture.needsUpdate = true; 
         o.material.map = texture; 


} 

var geometry = new THREE.Geometry();  
    geometry.vertices.push(new THREE.Vector3()); 
enemyShipMesh = new THREE.Points(geometry, makeEnemyBaseLabel(1,1)); 
scene.add(enemyShipMesh) 
.. 
.. 
update() { 
    updateEnemyBaseLabel(1,5,enemyShipMesh); 
} 

nach einiger Zeit habe ich ein Speicherleck. Ich bin mir sicher, dass das der Grund ist, neue und neue Texturen im Speicher zu erstellen.

Was ist der beste Ansatz, um Canvas auf das am besten referenzierte Objekt zu aktualisieren?

Ich suche so etwas wie:

var context = //new context without canvas creating? 
context.fillText(formatDistance(d), 64, 85); 

enemyShipMesh.material.map = context; // or most simple without creating a lot of new object each sec. 

Answer 1

Sie eine Leinwand und alle bei jedem Update erstellen, wenn Sie eine Leinwand und die Textur erstellt haben, können Sie gehen nur mit der Leinwand Kontext in Ihrer Update-Funktion und danach texture.needsUpdate = true setzen.