three.js所MakeTextSprite性能

Question

我使用的功能 「MakeTextSprite」 在https://stemkoski.github.io/Three.js/Sprite-Text-Labels.html

function makeTextSprite(message, parameters) { 
     if (parameters === undefined) parameters = {}; 
     var fontface = parameters.hasOwnProperty("fontface") ? parameters["fontface"] : "Helvetica"; 
     var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 18; 
     var borderThickness = parameters.hasOwnProperty("borderThickness") ? parameters["borderThickness"] : 0; 
     var borderColor = parameters.hasOwnProperty("borderColor") ? parameters["borderColor"] : { 
      r: 0, 
      g: 0, 
      b: 0, 
      a: 1.0 
     }; 
     var backgroundColor = parameters.hasOwnProperty("backgroundColor") ? parameters["backgroundColor"] : { 
      r: 255, 
      g: 255, 
      b: 255, 
      a: 1.0 
     }; 
     var textColor = parameters.hasOwnProperty("textColor") ? parameters["textColor"] : { 
      r: 0, 
      g: 0, 
      b: 0, 
      a: 1.0 
     }; 

     var canvas = document.createElement('canvas'); 
     var WIDTH = 400; 
     var HEIGHT = 150; 

     canvas.width = WIDTH; 
     canvas.height = HEIGHT; 
     var context = canvas.getContext("2d", {alpha:false}); 
     context.font = fontsize + "px " + fontface; 

     var metrics = context.measureText(message); 
     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.lineWidth = borderThickness; 
     roundRect(context, borderThickness/2, borderThickness/2, (textWidth + borderThickness) * 1.1, fontsize * 1.4 + borderThickness, 8); 

     context.fillStyle = "rgba(" + textColor.r + ", " + textColor.g + ", " + textColor.b + ", 1.0)"; 
     context.fillText(message, borderThickness, fontsize + borderThickness); 
     var texture = new THREE.Texture(canvas, THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, THREE.NearestFilter, THREE.NearestFilter); 
     texture.needsUpdate = true; 
     var spriteMaterial = new THREE.SpriteMaterial({ 
      map: texture, 
      useScreenCoordinates: false, 
      transparent: false, 
     }); 
     var sprite = new THREE.Sprite(spriteMaterial); 
     sprite.scale.set(30, 15, 0); 
     return sprite; 
    } 
    enter code here 

我創造了我的雪碧本：

Array[i] = makeTextSprite(Array[i].name, { 
       fontsize: 100, 
       borderColor: { 
        r: 255, 
        g: 255, 
        b: 255, 
        a: 1.0 
       }, 
       backgroundColor: { 
        r: 255, 
        g: 255, 
        b: 255, 
        a: 1 
       } 
      }); 

我想延長寬度禮。當我將寬度設置爲1000時，畫布會在SpriteMaterial中減小。所以我的Sprite的大小總是一樣的。

此外，字體是「像素化」，當我嘗試平滑字體時，我沒有成功。

Answer 1

通過添加到textWidth變量來操縱精靈的寬度。

var metrics = context.measureText(message); 
var extend = 1000; 
var textWidth = (metrics.width) + extend; 

它將用作繪製精靈的roundRect(...)函數的寬度。

爲了解決「像素化」你需要按比例縮小的精靈，就像這樣：

var width = spriteMaterial.map.image.width; 
var height = spriteMaterial.map.image.height; 

sprite.scale.set(width/10, height/10, 1);