在场景 Three.JS 中的每个节点（Three.Point）上放置标签

Question

我是 three.js 的新手，正在修改一些现有代码。

现有代码使用“THREE.BufferGeometry”+“THREE.Points”渲染图形

var geometryPc = new THREE.BufferGeometry();
var materialPc = new THREE.ShaderMaterial({....});
this.mesh = new THREE.Points(geometryPc, materialPc);

我正在尝试在随节点移动的每个节点上放置一个标签文本。

我试过了：

我尝试为每个节点创建“THREE.Sprite”，然后为其分配相对于该节点的位置。

let texture = new THREE.Texture(canvas);
let spriteMaterial = new THREE.SpriteMaterial({map: texture, useScreenCoordinates: false});
let sprite = new THREE.Sprite(spriteMaterial);

这似乎可行，但当节点数量相对较多时，UI 会变得过于繁重。

我也更喜欢使用“BufferGeometry”来创建文本。但找不到办法。

有没有更好的方法在节点上放置文本？

Answer 1

您使用精灵的方法虽然是迄今为止最明显的，但不幸的是还不够。如果我理解正确，每个精灵都会使用自己的纹理创建自己的网格，因此每个精灵都会导致单独的绘制调用。这种方法不可扩展。

我这样做的方法是制作一个能够渲染图像不同部分的着色器，然后制作一个包含字母的图像（采用等宽字体）。然后，对于几何中的每个点（应该渲染标签的地方），我为每个渲染的字母传递这样一组参数（着色器属性）：

    positionX: this.position.x, //position of entire label
    positionY: this.position.y,
    positionZ: this.position.z,
    colorR: this.color.r,
    colorG: this.color.g,
    colorB: this.color.b,
    colorA: this.visible ? (this.finalAlpha) : 0,
    scale: this.camera.zoom, //scale must depend on camera zoom
    spriteNumber: this.getTextPosition(lines[i][j]), //see below ;p
    offset: j + i * 32768, //this is for positioning one particular letter, 
                           //x and y merged together because I ran out of parameters
    size: this.size 

i 和 j 是标签中字母的“x”和“y”位置，着色器会自行偏移；其他参数应该或多或少明显:)

ParticleLabel.prototype.getTextPosition = function(symbol){
    switch(symbol){
    case '0': return 1;
    case '1': return 2;
    case '2': return 3;
    (...)
    case 'A': return 20;
    case 'B': return 21;
    case 'C': return 22;
    (...)

我无法展示整个代码，因为我是为商业解决方案制作的，但我稍后会在 codepen 上做一个示例，以展示一个可行的解决方案。