Three.js 三个.js平面上的材质不'；不匹配照明

我在Three.Js中通过合并一个曲面和两个平面创建了一个形状。我使用了Meshlambert材质作为材质。垂直面和弯曲面完美结合。但是，在水平面与曲线相交的地方有明显的硬线。灯光似乎没有对齐。我希望3个平面显示为一个具有平滑着色的对象。我做错什么了吗

addShape（）{
var半径=58，高度=100，startAngle=3.Math.degToRad（0），端角=3.Math.degToRad（90），水平段=25，垂直段=25；
变量宽度=半径*2*Math.PI；
var plane=新的三个平面几何图形（宽度、高度、水平段、垂直段）；
var指数=0；
对于（var i=0；i首先，您必须计算顶点法线。为此，请使用
THREE.Geometry.computeVertexNormals
。

看



此外，您还可以简化操作，如果使用此解决方案在一个标注栏中绘制曲面，则可以根据需要选择起点角度和终点角度，起点和终点的平面将始终能够无缝连接到曲面零件：

var radius = 58, height = 100,
    startAngle = THREE.Math.degToRad(-20),
    endAngle = THREE.Math.degToRad(110),
    horSegs = 25, vertSegs = 25,
    startLen = 100, endLen = 100;
var width = startLen + endLen + radius * (endAngle-startAngle);
var plane = new THREE.PlaneGeometry( width, height, horSegs+2, vertSegs);

var index = 0;
for (var i = 0; i <= vertSegs; i++) {
  plane.vertices[index].z = radius * Math.cos(startAngle) + startLen * Math.sin(startAngle);
  plane.vertices[index].x = radius * Math.sin(startAngle) - startLen * Math.cos(startAngle);
  index++;
  for (var j = 0; j <= horSegs; j++) {
    var angle = startAngle + j / horSegs * (endAngle - startAngle);
    plane.vertices[index].z = radius * Math.cos(angle);
    plane.vertices[index].x = radius * Math.sin(angle);
    index++;
  }
  plane.vertices[index].z = radius * Math.cos(endAngle) - endLen * Math.sin(endAngle);
  plane.vertices[index].x = radius * Math.sin(endAngle) + endLen * Math.cos(endAngle);
  index++;
}
plane.computeVertexNormals();

var半径=58，高度=100，
startAngle=3.Math.degToRad（-20），
端角=三个数学degToRad（110），
horSegs=25，vertSegs=25，
starten=100，endLen=100；
变幅宽度=STARTEN+endLen+半径*（endAngle startAngle）；
var平面=新的三个平面几何图形（宽度、高度、horSegs+2、顶点）；
var指数=0；
对于（var i=0；i），看起来您没有更新法线。应更新沿曲线的法线，使其指向曲线的中心，以达到所需的效果。
plane.computeVertexNormals();

var radius = 58, height = 100,
    startAngle = THREE.Math.degToRad(-20),
    endAngle = THREE.Math.degToRad(110),
    horSegs = 25, vertSegs = 25,
    startLen = 100, endLen = 100;
var width = startLen + endLen + radius * (endAngle-startAngle);
var plane = new THREE.PlaneGeometry( width, height, horSegs+2, vertSegs);

var index = 0;
for (var i = 0; i <= vertSegs; i++) {
  plane.vertices[index].z = radius * Math.cos(startAngle) + startLen * Math.sin(startAngle);
  plane.vertices[index].x = radius * Math.sin(startAngle) - startLen * Math.cos(startAngle);
  index++;
  for (var j = 0; j <= horSegs; j++) {
    var angle = startAngle + j / horSegs * (endAngle - startAngle);
    plane.vertices[index].z = radius * Math.cos(angle);
    plane.vertices[index].x = radius * Math.sin(angle);
    index++;
  }
  plane.vertices[index].z = radius * Math.cos(endAngle) - endLen * Math.sin(endAngle);
  plane.vertices[index].x = radius * Math.sin(endAngle) + endLen * Math.cos(endAngle);
  index++;
}
plane.computeVertexNormals();