Javascript 如何在THREE.js中实现球体表面精灵的均匀分布？

我正在尝试建立一个单词数据库，其中最重要的单词靠近球体顶部，不太重要的单词离球体更远。因此，我为每个单词创建了一个具有足够顶点的球体，按照与球体顶部的距离顺序创建了这些顶点的列表，并按照排序列表的顺序将文本精灵放置在顶点的位置

视频版本：

在我的脑海里听起来像是一个很好的计划，但很明显，球体的几何结构会导致单词在离顶部越远的地方传播得越远。我需要一个结果，看起来像一个均匀分布在整个表面。它不一定是完美的，只是视觉上比这更接近

如何才能达到预期效果？

以下是相关方法：

positionDb(db) {
    console.log("mostRelated", db.mostRelated);
    console.log("depthList", this.depthList);
    let mostRelated = db.mostRelated;
    let depthList = this.depthList;
    for (let i = 0; i < mostRelated.length; i++) {
      this.addTextNode(mostRelated[i].data, this.depthList[i].vertice, this.depthList[i].depth);
    }

}
addTextNode(text, vert, distance) {
    let fontSize = 0.5 * (600 / distance);
    let sprite = new THREE.TextSprite({
      fillStyle: '#000000',
      fontFamily: '"Arial", san-serif',
      fontSize: fontSize,
      fontWeight: 'bold',
      text: text
    });
    this.scene.add(sprite);
    sprite.position.set(vert.x, vert.y, vert.z);
    setTimeout(() => {
        sprite.fontFamily = '"Roboto", san-serif';
    }, 1000)
}


this.scene = scene;
this.geometry = new THREE.SphereGeometry(420, 50, 550);
var material = new THREE.MeshBasicMaterial({
    color: 0x0011ff
});
var sphere = new THREE.Mesh(this.geometry, wireframe);
var wireframe = new THREE.WireframeGeometry(this.geometry);
let frontVert = {
    x: 0,
    y: 100,
    z: 0
}
let depthList = [];
this.geometry.vertices.forEach(vertice => {
  let depth = getDistance(frontVert, vertice);
  if (depthList.length === 0) {
    depthList.push({
      depth,
      vertice
    });
  } else {
    let flag = false;
    for (let i = 0; i < depthList.length; i++) {
      let item = depthList[i];
      if (depth < item.depth) {
        flag = true;
        depthList.splice(i, 0, {
          depth,
          vertice
        });
        break;
      }
    }
    if (!flag) depthList.push({
      depth,
      vertice
    });
  }
});

positionDb（db）{
log（“mostRelated”，db.mostRelated）；
log（“depthList”，this.depthList）；
设mostRelated=db.mostRelated；
让depthList=this.depthList；
for（设i=0；i{
sprite.fontFamily='机器人'，圣塞里夫'；
}, 1000)
}
这个场景=场景；
这个几何=新的三个球面测量法（420,50,550）；
var材料=新的三网格基本材料({
颜色：0x0011ff
});
var sphere=new THREE.Mesh（this.geometry，线框）；
var线框=新的三线框几何体（this.geometry）；
设frontVert={
x:0,，
y:100，
z:0
}
让depthList=[]；
this.geometry.vertices.forEach（vertice=>{
让深度=getDistance（前垂直、垂直）；
如果（depthList.length==0）{
深度推({
深度
顶点
});
}否则{
让flag=false；
for（设i=0；i

可能是

例如：

函数fibonacciphere（numPoints，point）{
常数rnd=1；
常量偏移=2/个基点；
常量增量=Math.PI*（3-Math.sqrt（5））；
常数y=（点*偏移量）-1+（偏移量/2）；
常数r=Math.sqrt（1-Math.pow（y，2））；
常数φ=（点+rnd）%numPoints*增量；
常数x=数学cos（φ）*r；
常数z=数学sin（φ）*r；
返回新的三个向量3（x，y，z）；
}
函数main（）{
常数fov=75；
const aspect=2；//画布默认值
常数近=0.1；
常数far=5；
常量摄影机=新的三个透视摄影机（视野、方位、近距离、远距离）；
摄像机位置z=2；
const scene=new THREE.scene（）；
函数addTextNode（文本，垂直）{
const div=document.createElement（'div'）；
div.className='label'；
div.textContent=文本；
div.style.marginTop='-1em'；
常量标签=新的三个.CSS2DObject（div）；
标签。位置。副本（垂直）；
场景。添加（标签）；
}
const renderer=new THREE.css2drender（）；
const container=document.querySelector（'#c'）；
container.appendChild（renderer.domeElement）；
const controls=新的三个.orbitControl（摄影机、渲染器.doElement）；
常量numPoints=50；
for（设i=0；i

正文{
保证金：0；
溢出：隐藏；
}
#c{
宽度：100vw；
高度：100vh；
显示：块；
}
.标签{
颜色：红色；
}

你想要的是一个不同于默认的

THREE.SphereGeometry

的几何体。关于这方面的文章很多。这是一个困难的主题，但有现成的解决方案。要详细说明一下：如果你去，例如，增加一点顶点数量，你会看到“线”所有这些都以极点的两个奇点结束。还有其他方法可以做到这一点，例如足球没有这样的极点。在一个球体上完全等距分布顶点是一个有很多论文、问题等的话题。@ASDFGerte在来问这个问题之前，我一直在寻找这类问题，但正如你所看到的，谷歌搜索的替代方案完全是空的y（与备选方案无关），我已经用我能想到的很多方法重新编写了我的搜索。你知道我可以尝试任何特定的项目或更好的搜索词来找到它们吗？当我看到它时，我很害怕，因为我对数学/几何没有很好的理解，但我只是简单地将X，Y，Z乘以我的球体的大小，用3.js和poof，完全对齐。你呢“你是个巫师。我希望我能获得荣誉，但我是从链接答案中得到的，谁从FibonacciWell获得的。谢谢分享，这可能需要很多时间才能找到。结果：

function fibonacciSphere(numPoints, point) {
  const rnd = 1;
  const offset = 2 / numPoints;
  const increment = Math.PI * (3 - Math.sqrt(5));

  const y = ((point * offset) - 1) + (offset / 2);
  const r = Math.sqrt(1 - Math.pow(y, 2));

  const phi = (point + rnd) % numPoints * increment;

  const x = Math.cos(phi) * r;
  const z = Math.sin(phi) * r;

  return new THREE.Vector3(x, y, z);
}