使用three.js在特定点上编写2D文本

Question

var sourcePos=new THREE.Vector3(-5,0,0);
var targetPos=new THREE.Vector3(-5,2,0);
var direction=new THREE.Vector3().sub(targetPos,sourcePos);
var arrow=newTHREE.ArrowHelper(direction.clone().normalize(),sourcePos,direction.length(),0x00ff00);
scene.add(arrow);

At Point sourcePos and targetPos I want give a label Like 'A' and 'B'. How can I achieve this in three.js?

Answer 1

Three.js has a TextGeometry . When you set the height to 1, it is getting flat like 2d text and you can set it to a specific point in your scene:

loader.load( 'helvetiker_bold.typeface.json', function ( font ) {

        var textGeo = new THREE.TextGeometry( content, {

            font: font,
            size: size,
            height: 1 

    });


    textMesh = new THREE.Mesh( textGeo, textMaterial );