Three.js图形为何多出线条？3个矩形出现13条线问题求助

咱们先捋清楚问题根源——大概率是线条绘制模式不对，或者顶点的组织逻辑没处理好，导致多出来一条不该有的连接线。

可能的原因拆解 #

你当前用的THREE.LineBasicMaterial搭配默认的THREE.Line（也就是LineStrip模式），这种模式会把所有顶点按顺序连成一条连续的线，而不是独立的线段。比如你把3个矩形的顶点依次塞进同一个Geometry里，它不仅会画出每个矩形的四条边，还会自动把前一个矩形的最后一个顶点和下一个矩形的第一个顶点连起来，这就凭空多了额外的线条。另外，如果不小心用了LineLoop模式（会自动闭合首尾顶点），或者某个矩形的顶点重复录入，也可能导致线条数量异常。

具体解决方案 #

方案1：改用THREE.LineSegments绘制独立线段 #

LineSegments会把每两个连续顶点当成一条独立线段，不会自动连接不相关的顶点。要画3个矩形，每个矩形需要8个顶点（每条边对应一组顶点对），3个矩形总共24个顶点，就能精准画出12条线：

function init() {
  var material = new THREE.LineBasicMaterial({ 
    linewidth: 2, 
    color: 0xDF0101,
    opacity: 0.25,
    transparent: true // 必须开启透明，opacity参数才会生效
  }); 
  var geometry = new THREE.Geometry(); 

  // 第一个矩形的四条边（每条边两个顶点）
  geometry.vertices.push(
    // 第一条边
    new THREE.Vector3(-17.561942485257, 98.685013457785, 50.448760648027),
    new THREE.Vector3(-18.901369249844, 100.2812801165, 50.448760648027),
    // 第二条边
    new THREE.Vector3(-18.901369249844, 100.2812801165, 50.448760648027),
    new THREE.Vector3(/* 填入第一个矩形第三个顶点坐标 */),
    // 补充第一个矩形剩余两条边的顶点对
    // ...
    // 依次添加第二个、第三个矩形的每条边顶点对
  );

  // 关键：用LineSegments替代默认的Line
  var line = new THREE.LineSegments(geometry, material);
  scene.add(line);
}

方案2：给每个矩形单独创建Geometry和Line #

如果不想调整顶点组织方式，可以把每个矩形的顶点单独放在一个Geometry里，用LineLoop模式自动闭合矩形，这样三个矩形是独立的Line对象，不会互相连接：

function init() {
  var material = new THREE.LineBasicMaterial({ 
    linewidth: 2, 
    color: 0xDF0101,
    opacity: 0.25,
    transparent: true
  }); 

  // 第一个矩形
  var rect1Geometry = new THREE.Geometry();
  rect1Geometry.vertices.push(
    new THREE.Vector3(-17.561942485257, 98.685013457785, 50.448760648027),
    new THREE.Vector3(-18.901369249844, 100.2812801165, 50.448760648027),
    new THREE.Vector3(/* 第一个矩形第三个顶点 */),
    new THREE.Vector3(/* 第一个矩形第四个顶点 */),
    new THREE.Vector3(-17.561942485257, 98.685013457785, 50.448760648027) // 回到起点，自动闭合矩形
  );
  var rect1Line = new THREE.Line(rect1Geometry, material, THREE.LineLoop);
  scene.add(rect1Line);

  // 第二个矩形同理
  var rect2Geometry = new THREE.Geometry();
  rect2Geometry.vertices.push(/* 第二个矩形的四个顶点+起点 */);
  var rect2Line = new THREE.Line(rect2Geometry, material, THREE.LineLoop);
  scene.add(rect2Line);

  // 第三个矩形重复上述逻辑
  // ...
}

额外注意点 #

你代码里的opacity: 0.25必须搭配transparent: true才能生效，不然透明效果不会显示出来哦。

内容的提问来源于stack exchange，提问作者Minathe