三.JS：球形线框材质/EdgesHelper控件

Question

Three.JS 的新手。大多数情况下，我想知道这是我想做的正确方法。

我正在尝试在简单的球形几何体上渲染某种类型的线框材质。我正在追求这种特殊的外观：

我目前的努力：

Note: Moved to Plunker below

http://plnkr.co/edit/FrCUIwxH1IL3wFKwHSRJ?p=preview

目前我正在使用 EdgesHelper 来获得一个整洁的网格，我不确定如何删除垂直线。

理想情况下，我还需要控制水平线之间的距离和它们的不透明度，但无法通过助手来做到这一点。我的另一个想法是为每条“线”绘制单独的线几何图形，但我认为这有点矫枉过正。任何想法表示赞赏。

Answer 1

一个简单的着色器like this 是否足以满足您的需求？

顶点：

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