Javascript 用于负值的三个JS圆线几何图形颜色

我一直在测试一些如何让一个圆的Z值为正的部分有不同的颜色的想法。我尝试了一种方法，创建两条独立的线段，并使用不同的材质。如果圆具有不跨越Z=0的线段，则该方法有效。我正在研究的问题更为复杂，因为线段将跨越Z=0边界，所以如果我尝试在两段中完成，则最终会出现间隙。有没有办法只使用一条线几何图形，然后更改线中属于负Z值的部分的颜色？我不确定这是正确的方法。谢谢

以下是我到目前为止所做的测试（使用X，Y）：

卷曲颜色
正文{页边距：0；}
画布{宽度：100%；高度：100%}
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（500，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var分段计数=100，
半径=10，
几何体=新的三个。几何体（）；
geometry2=新的3.Geometry（）；
材质=新的三线基本材质（{颜色：#5fd119}）；//浅绿色
material2=新的三线基本材质（{颜色：#3d8710}）；//深绿色
//将原点垂直推入
geometry2.Vertexs.push（新的3.Vector3（-10,0,0））；
对于（变量i=0；i=0）{
几何。顶点。推（新的三个向量3（x，y，z））；
}否则{
geometry2.Vertexs.push（新的3.Vector3（x，y，z））；
}          
}
添加（新的三线（几何体、材质））；
场景.添加（新的三线（geometry2，material2））；
摄像机位置z=5；
var render=函数（）{
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
};
render（）；

使用下面的答案进行更新。非常有用：

---

我希望我没弄错。可以设置几何体顶点的颜色，然后使用材质的

vertexColors

参数

  var radius = 5;
  var shape = new THREE.Shape();
  shape.moveTo(radius, 0);
  shape.absarc(0, 0, radius, 0, 2 * Math.PI, false);
  var spacedPoints = shape.createSpacedPointsGeometry(360);

  var vertexColors = []; // array for our vertex colours
  spacedPoints.vertices.forEach( function( vertex ){ // fill the array
    if( vertex.y < 0 )
      vertexColors.push( new THREE.Color( 0xff0000 ))
    else
      vertexColors.push( new THREE.Color( 0x0000ff ));
  });
  spacedPoints.colors = vertexColors; // assign the array

  var orbit = new THREE.Line(spacedPoints, new THREE.LineBasicMaterial({
    vertexColors: THREE.VertexColors // set this parameter like it shown here
  }));
  scene.add(orbit);

var半径=5；
var shape=新的三个.shape（）；
形状。移动到（半径，0）；
absarc（0,0，半径，0,2*Math.PI，false）；
var spacedPoints=shape.createspacedpoints几何（360）；
var vertexColors=[]；//我们的顶点颜色数组
forEach（函数（顶点）{//填充数组
if（顶点y<0）
VertexColor.push（新的三种颜色（0xff0000））
其他的
vertexColors.push（新的三种颜色（0x0000ff））；
});
spacedPoints.colors=顶点颜色；//分配数组
var orbit=新的三线（空间点，新的三线基本材质({
vertexColors:THREE.vertexColors//按此处所示设置此参数
}));
场景。添加（环绕）；

---

示例

经过一些调整，我能够将其集成到我的项目中。正是我想要的，谢谢！！！谢谢，三个js应用程序，用于查看真实的小行星轨道。：）

  var radius = 5;
  var shape = new THREE.Shape();
  shape.moveTo(radius, 0);
  shape.absarc(0, 0, radius, 0, 2 * Math.PI, false);
  var spacedPoints = shape.createSpacedPointsGeometry(360);

  var vertexColors = []; // array for our vertex colours
  spacedPoints.vertices.forEach( function( vertex ){ // fill the array
    if( vertex.y < 0 )
      vertexColors.push( new THREE.Color( 0xff0000 ))
    else
      vertexColors.push( new THREE.Color( 0x0000ff ));
  });
  spacedPoints.colors = vertexColors; // assign the array

  var orbit = new THREE.Line(spacedPoints, new THREE.LineBasicMaterial({
    vertexColors: THREE.VertexColors // set this parameter like it shown here
  }));
  scene.add(orbit);