Javascript Three.JS：球形线框材质/边缘辅助控制

对Three.JS是新的。主要是我想知道这是否是我想要做的事情的正确方法

我正在尝试在一个简单的球形几何体上渲染某种类型的线框材质。我想要这个特别的外观：

我目前的努力：

Note: Moved to Plunker below

目前我正在使用EdgeHelper获得一个整洁的网格，我不知道如何删除垂直线

理想情况下，我需要控制水平线之间的距离以及它们的不透明度，但无法使用辅助对象实现这一点。我的另一个想法是为每条“线”绘制单独的线几何图形，但我认为这有点过分了。非常感谢您的任何想法。

一个简单的着色器是否足以满足您的需要

顶点：

varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

片段：

uniform vec3 color1;
uniform float alpha1;
uniform vec3 color2;
uniform float alpha2;
uniform float lines;
uniform float linewidth;
varying vec2 vUv;
void main() {
  float p = abs(fract(lines*vUv.y)*2.0-1.0);
  if(p < linewidth / 100.0){
    gl_FragColor = vec4(color1, alpha1);
  }else{
    gl_FragColor = vec4(color2, alpha2);
  }
}

统一的vec3颜色1；
均匀浮动alpha1；
均匀vec3色2；
均匀浮动alpha2；
均匀浮动线；
均匀浮动线宽；
可变vec2 vUv；
void main（）{
浮点数p=绝对值（分数线*vUv.y）*2.0-1.0）；
如果（p

你的“其他”想法是最好的。但是使用

triple.LineSegments

可以在一条直线上渲染所有环。也可以使用

缓冲几何体

。几何体将是一组成对的点。开始吧。嗨，2pha，非常感谢你的贡献。尽管我在Three.JS网站上阅读了一些关于着色器的资料，但我对着色器并不完全熟悉。你能给我解释一下这个是怎么工作的吗？看看网页的来源就行了。它正在使用。查看我的更多信息。网上有很多GLSL着色器教程。谢谢。我有一个晚上的时间来学习你们的例子。下一步是使线条发光。也非常感谢你的非常完整的例子-控件帮助我掌握了它。