Three.JS:球形线框材料/边缘控制器

时间:2015-10-17 02:59:15

标签: javascript three.js drawing

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

我正在尝试在简单的球形几何体上渲染某种类型的线框材质。我正在追寻这个特殊的表情:

enter image description here

我目前的努力:

let dict = [
    "name": "John",
    "NAME": "David",
]

print(dict[ci: "name"])   // no guarantee that you will get David or John.

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

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

理想情况下,我需要控制水平线之间的距离和它们的不透明度,但是无法使用帮助器来完成此操作。我的另一个想法是为每条“线”绘制单独的线条几何形状,但我认为这有点过分。任何想法都表示赞赏。

1 个答案:

答案 0 :(得分:2)

一个简单的着色器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);
  }
}