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); 

点sourcePosとtargetPosで 'A'と 'B'のようなラベルを付けたいと思います。 three.jsでこれをどのように達成できますか？

Answer 1

Three.jsはTextGeometryです。高さを1に設定すると、2Dテキストのようにフラットになり、シーン内の特定のポイントに設定することができます。

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);