ThreeJS: Różnica wielkości czcionki tekstu Sprite między renderem WebGL a rendererem Canvas

Question

Używam trzech JS do opracowania wykresu 3d. Chcę pokazać jednostki wykresu jako THREE.SPRITE. Aby utworzyć SPRITE, najpierw utworzyłem element canvas i dodałem do niego tekst. Następnie utworzyłem THREE.Texture z elementem canvas, który został wcześniej utworzony. Utworzono THREE.SpriteMaterial z teksturą jako mapą, a następnie utworzono THREE.SPRITE przy użyciu tego sprite'a. Dodano ten sprite materiał do sceny. Gdy renderer jest instancją o rozmiarze THREE.WebGLRenderer, rozmiar tekstu jest bardzo mały, a gdy renderer jest instancją o numerze THREE.CanvasRenderer, rozmiar tekstu jest bardzo duży.

Poniżej znajduje się kod, którego użyłem do utworzenia Sprite.

var canvas = document.createElement('canvas'), 
    context = canvas.getContext('2d'), 
    metrics = null, 
    textHeight = 100, 
    textWidth = 0, 
    actualFontSize = 20; 

context.font = "normal " + textHeight + "px Arial"; 
metrics = context.measureText("Sample Text"); 
var textWidth = metrics.width; 

canvas.width = textWidth; 
canvas.height = textHeight; 
context.font = "normal " + textHeight + "px Arial"; 
context.textAlign = "center"; 
context.textBaseline = "middle"; 
context.fillStyle = "#ff0000"; 
context.fillText("Sample Text", textWidth/2, textHeight/2); 

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

var material = new THREE.SpriteMaterial({ map: texture, useScreenCoordinates: false, alignment: THREE.SpriteAlignment.center }); 
material.transparent = true; 
//var textObject = new THREE.Sprite(material); 
var textObject = new THREE.Object3D(); 
var sprite = new THREE.Sprite(material); 
textObject.textHeight = actualFontSize; 
textObject.textWidth = (textWidth/textHeight) * textObject.textHeight; 
//sprite.scale.set(textObject.textWidth/textWidth, textObject.textHeight/textHeight, 1); 
textObject.add(sprite); 

scene.add(textObject); 

Czy jest to zachowanie domyślne, czy też robię coś złego. Zaproponuj mi jakąś poprawkę, która działa konsekwentnie zarówno w renderach Canvas, jak i WebGL.

Z góry dziękuję.

Answer 1

Po wypróbowaniu tak wielu kombinacji zadziałał poniższy kod.

var SCREEN_WIDTH = 400, 
    SCREEN_HEIGHT = 300, 
    VIEW_ANGLE = 45, 
    ASPECT = SCREEN_WIDTH/SCREEN_HEIGHT, 
    NEAR = 0.1, 
    FAR = 20000, 
    webGLScene = new THREE.Scene(), 
    canvasScene = new THREE.Scene(), 
    webGLCamera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR), 
    canvasCamera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR), 
    webGLRenderer = new THREE.WebGLRenderer({ antialias: true }), 
    canvasRenderer = new THREE.CanvasRenderer(); 

webGLScene.add(webGLCamera); 
canvasScene.add(canvasCamera); 

webGLCamera.position.set(0, 0, 20); 
webGLCamera.lookAt(webGLScene.position); 

canvasCamera.position.set(0, 0, 20); 
canvasCamera.lookAt(canvasScene.position); 

webGLRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 
canvasRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 

container = document.body; 
container.appendChild(webGLRenderer.domElement); 
container.appendChild(canvasRenderer.domElement); 

makeSprite(webGLScene, "webgl"); 
makeSprite(canvasScene, "2d"); 

function makeSprite(scene, rendererType) { 
    var canvas = document.createElement('canvas'), 
     context = canvas.getContext('2d'), 
     metrics = null, 
     textHeight = 100, 
     textWidth = 0, 
     actualFontSize = 2; 

    context.font = "normal " + textHeight + "px Arial"; 
    metrics = context.measureText("Sample Text"); 
    var textWidth = metrics.width; 

    canvas.width = textWidth; 
    canvas.height = textHeight; 
    context.font = "normal " + textHeight + "px Arial"; 
    context.textAlign = "center"; 
    context.textBaseline = "middle"; 
    context.fillStyle = "#ff0000"; 
    context.fillText("Sample Text", textWidth/2, textHeight/2); 

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

    var material = new THREE.SpriteMaterial({ map: texture, useScreenCoordinates: false, alignment: THREE.SpriteAlignment.center }); 
    material.transparent = true; 
    //var textObject = new THREE.Sprite(material); 
    var textObject = new THREE.Object3D(); 
    var sprite = new THREE.Sprite(material); 
    textObject.textHeight = actualFontSize; 
    textObject.textWidth = (textWidth/textHeight) * textObject.textHeight; 
    if (rendererType == "2d") { 
     sprite.scale.set(textObject.textWidth/textWidth, textObject.textHeight/textHeight, 1); 
    } else { 
     sprite.scale.set(textWidth/textHeight * actualFontSize, actualFontSize, 1); 
    } 

    textObject.add(sprite); 

    scene.add(textObject); 
} 

canvasRenderer.render(canvasScene, canvasCamera); 
webGLRenderer.render(webGLScene, webGLCamera); 

Dodaj TRZY link JS (release 62) i użyj następującego skryptu.

Mam nadzieję, że pomoże to innym osobom z podobnymi problemami.

Aktualizacja: Oto jsfiddle powyższego kodu.