在3D对象上方附加文本

时间:2014-12-26 13:59:39

标签: three.js label game-engine

我想知道是否可以在3D对象上方附加文字? 如果是这样,我该怎么做?

到目前为止,我正在执行以下操作,以使用其材质加载网格,最后将其添加到THREE.Object3D();并将其添加到场景中。工作很好没有任何问题。 下一步是我想在这个对象上面显示一个很好的文本,它始终是固定的,可以从各个角度看到。

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

这样的事情:

enter image description here

这就是我现在的游戏:

enter image description here

1 个答案:

答案 0 :(得分:1)

确定它可能。你可以在它上面创建一个带有文本的画布,你可以将它用作一个总是看​​着相机的平面上的纹理,你也可以用一个粒子来做,但我不太确定它是如何工作的,因为粒子材料有一个大小参数。类似的东西:

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

并在渲染/动画循环内部使所有标签看到相机:

label.LookAt(camera.position);