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

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