Three.JS:球形线框material/EdgesHelper控件

Question

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

我正在尝试在简单的球形几何体上渲染某种类型的线框 material。我喜欢这种特别的造型：

我目前的努力：

Note: Moved to Plunker below

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

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

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

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

Three.JS:球形线框material/EdgesHelper控件

Three.JS: Spherical wireframe material /EdgesHelper control

javascript

drawing

three.js