web-dev-qa-db-ja.com

three.js 2Dテキストスプライトラベル

私はthree.jsを使い始めたばかりで、2Dテキストに属するいくつかの問題があります。

欲しいもの：たとえば、 X、Y、Z軸。ラベルは常にカメラを向いている必要があります。後で表示されるはずですが、ホバリングしている場合は別のトピックです。

私の問題は何ですか私はこのチュートリアルを見つけました（これはまさに達成したい効果です| http://stemkoski.github.io /Three.js/Sprite-Text-Labels.html ）ですが、var spriteAlignment = THREE.SpriteAlignment.topLeft;などのメソッドを使用する古いバージョンのthree.js用です。私はこの回避策を見つけました（ THREE.SpriteAlignmentがundefinedとして表示されます ）が、自分のニーズに新しいアプローチをどのように使用できるかは明確ではありません。

私が探しているもの多分、私が探していたものに名前を付けたり、短いアプローチを考えたりするのを手伝ってくれるかもしれません。

javascripthtmlthree.jshtml5-canvas
17
schlenger

テキストスプライトはいいですが、1000以上使用すると、GPUのためにすべてが遅くなる可能性があります。

「より良い」方法があります。SpriteをCanvasとして作成します。ここでも私が使用する関数を示します。

    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;  
    }
11
mcode

私はあなたのためにそれを行うNPMのモジュールを公開しました： https://github.com/gamestdio/three-text2d

Object3Dキャンバスを手動で処理せずにレンダリングされたテキストを使用します。

例：

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

SpriteTextオブジェクトを使用できます。 sprites_text の使用例を参照してください。

コードの例：

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

ソース 。

0
Andrej