web-dev-qa-db-fra.com

trois.js étiquettes de texte de texte 2D

Je suis nouveau sur three.js et j'ai quelques problèmes avec 2D Text:

Ce que je veux: Je veux des étiquettes pour, par exemple. les axes x, y et z. Les étiquettes doivent toujours regarder vers la caméra. Peut-être que plus tard, ils ne devraient être montrés que s'ils sont survolés, mais c'est un autre sujet.

Quels sont mes problèmes J'ai trouvé ce tutoriel (qui est exactement l'effet que je veux obtenir | http://stemkoski.github.io/Three.js/Sprite-Text- Labels.html ), mais c'est pour une ancienne version de three.js en utilisant des méthodes comme var spriteAlignment = THREE.SpriteAlignment.topLeft;. J'ai trouvé cette solution de contournement ( THREE.SpriteAlignment se révélant indéfinie ), mais la manière dont je pourrais utiliser la nouvelle approche pour mes besoins n'est pas claire.

Ce que je cherche Peut-être pourriez-vous m'aider à nommer la chose que je cherchais ou à proposer une approche brève.

javascripthtml5three.jshtml5-canvas
15
schlenger

Les sprites de texte sont gentils, mais si vous en utilisez plus de mille, cela peut tout ralentir à cause du GPU.

Il existe un "meilleur" moyen, créez le Sprite en tant que Canvas, voici une fonction que j’utilise aussi pour cela:

    function makeTextSprite( message, parameters )
    {
        if ( parameters === undefined ) parameters = {};
        var fontface = parameters.hasOwnProperty("fontface") ? parameters["fontface"] : "Arial";
        var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 18;
        var borderThickness = parameters.hasOwnProperty("borderThickness") ? parameters["borderThickness"] : 4;
        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 context = canvas.getContext('2d');
        context.font = "Bold " + 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) 
        texture.needsUpdate = true;

        var spriteMaterial = new THREE.SpriteMaterial( { map: texture, useScreenCoordinates: false } );
        var Sprite = new THREE.Sprite( spriteMaterial );
        Sprite.scale.set(0.5 * fontsize, 0.25 * fontsize, 0.75 * fontsize);
        return Sprite;  
    }
6
mcode

J'ai publié un module sur NPM qui le fait pour vous: https://github.com/gamestdio/three-text2d

Il vous permet d’avoir un Object3D avec le texte rendu sans traiter manuellement le canevas.

Exemple: 

var Text2D = require('three-text2d').Text2D

var text = new Text2D("Hello world!", { align: textAlign.right, font: '30px Arial', fillStyle: '#000000', antialias: true })
scene.add(text)
3
Endel

Vous pouvez utiliser mon objet SpriteText. Voir un exemple d'utilisation de sprites_text .

Exemple de code:

var spriteText = new THREE.SpriteText({ text: 'Hello world!' });
scene.add( spriteText );

La source .

0
Andrej