'Attach text above 3D Object

I'm wondering if it is possible to attach a text above a 3D Object? If so, how would I do it?

So far I'm doing the following below to load a mesh with its material and lastly adding it to a THREE.Object3D(); and adding it to the scene. Works great without any problems. Next step is I want to show a nice text above its this object that is always fixed and can be seen from every angle.

loader.load('assets/' + enemyUrl, function (geometry, materials) {

  material = new THREE.MeshFaceMaterial( materials );
  model = new THREE.SkinnedMesh( geometry, material );

  var mats = model.material.materials;

  for (var i = 0,length = mats.length; i < length; i++) {
    var m = mats[i];
    m.skinning = true;
  }

  ensureLoop(geometry.animations[0]);

  function ensureLoop( tmp ) {
    for ( var i = 0; i < tmp.hierarchy.length; i ++ ) {
      var bone = tmp.hierarchy[ i ];

      var first = bone.keys[ 0 ];
      var last = bone.keys[ bone.keys.length - 1 ];

      last.pos = first.pos;
      last.rot = first.rot;
      last.scl = first.scl;
    }
  }

  model.scale.set(2.5,2.5,2.5);

  // TODO: Randomize where to put it in the world
  yawObject.position.y = spawnPosition.y;
  yawObject.position.x = spawnPosition.x;
  yawObject.position.z = spawnPosition.z;

  yawObject.add(model);
  scene.add(yawObject);
});

Something like this:

enter image description here

This is what my game looks like now:

enter image description here



Solution 1:[1]

sure its possible. you can create a canvas with text on it, which you use as a texture on a plane that always looks at the camera, you could also do it with a single particle, but im not quite sure how it would work since particle materials have a size parameter. something like:

var name = 'Rovdjuret';
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
    ctx.font="20px Georgia";
    ctx.fillText(name,10,50);

var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true; //just to make sure it's all up to date.

var label = new THREE.Mesh(new THREE.PlaneGeometry, new THREE.MeshBasicMaterial({map:texture}));

and inside the render/animation loop you make all the labels look at the camera:

label.lookAt(camera.position);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Anye