Javascript 有没有办法在Three.js中将精灵合并为几何体？

在我的例子中，我想在地形上放置一些带有一些城市名称的标签。但是当我放超过10个的时候，fps下降了很多

我在这里遵循了编写的代码

我的代码是这样的：

var canvas = document.createElement('canvas');
var sizeCanvas = 250;
canvas.width = sizeCanvas;
canvas.height = sizeCanvas;
var context = canvas.getContext('2d');
context.font = "Bold " + size + "px " + font;
context.textAlign = 'center';

contexto.fillStyle = "rgba(10, 10, 10, 1.0)";

contexto.fillText(text, sizeCanvas / 2, sizeCanvas / 2);

var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

var labelMaterial = new THREE.SpriteMaterial(
        {map: texture, useScreenCoordinates: false});
var label = new THREE.Sprite(labelMaterial);

label.position.x = this._vector.x;
label.position.y = this._vector.y;
label.position.z = this._vector.z;

etiqueta.scale.set(10, 10, 1.0);

scene.add(label);

我猜想合并精灵的主要问题是每个标签的不同纹理

---

谢谢你的建议

基本上是为每个标签创建画布对象。您可以做的是，将Base64编码的图像从画布传递到纹理，然后将下一个标签写入同一画布。这将给您带来更大的收益和性能提升。例如：

// create the canvas once
var canvas = document.createElement('canvas');

// set the size of the canvas
var sizeCanvas = 250;
canvas.width = sizeCanvas;
canvas.height = sizeCanvas;

// get the context and set the styles
var context = canvas.getContext('2d');
context.font = "Bold " + size + "px " + font;
context.textAlign = 'center';
context.fillStyle = "rgba(10, 10, 10, 1.0)";

// iterate through your labels
for(var i = 0, j = myLabels.length; i < j; i++){
  contex.fillText(myLabels[i].text, sizeCanvas / 2, sizeCanvas / 2);

  // create the texture
  var texture = new THREE.Texture(canvas.toDataURL());
  texture.needsUpdate = true; // don't know if this is needed

  // put the texture into the material
  var labelMaterial = new THREE.SpriteMaterial({map: texture, useScreenCoordinates: false});

  var label = new THREE.Sprite(labelMaterial);

  // set the label position to the vector, maybe you should put the vector into myLabels aswell
  label.position = this._vector.clone();

  // add the label to the scene
  scene.add(label);

  // clear the canvas for the new text
  context.clearRect(0,0,sizeCanvas,sizeCanvas);
}

etiqueta.scale.set(10, 10, 1.0);

//创建画布一次
var canvas=document.createElement（'canvas'）；
//设置画布的大小
var sizeCanvas=250；
canvas.width=sizeCanvas；
canvas.height=sizeCanvas；
//获取上下文并设置样式
var context=canvas.getContext（'2d'）；
context.font=“Bold”+大小+“px”+字体；
context.textAlign='center'；
context.fillStyle=“rgba（10,10,10,1.0）”；
//遍历标签
for（var i=0，j=myLabels.length；i

为了最终提高性能（比@raphaelRauwolf建议的工作量要多，这里说的是上百次），您必须使用ParticleSystem（使用GL_点渲染）和纹理，并根据相机的近邻（）动态分配子成像（）。对于不在相机周围的其他铭牌，可以使用第二个带有较小预览铭牌的TextureAtlas

如果你只有大约1000个，你可以不用近邻和子成像来做同样的事情。只需使用所有铭牌创建一个TextureAtlas，并使用THREE.ParticleSystem:）进行渲染即可

---

如果您对这两种方法中的一种感兴趣，请告诉我，我会详细说明。

您希望您所在城市的标签始终面对摄像机吗？那么您无法将所有精灵合并为一个。一个大精灵面对镜头的方式和几个小精灵面对镜头的方式不同，这是我想象的。谢谢。“但是当我输入超过10个时，fps会减少很多。”这不应该发生。你能展示一个真实的例子吗？很抱歉，这个应用程序托管在一个本地服务器上，我需要一些JavaServlet调用来获取城市。我分享照片中的不同之处