如何为Three.js中的独立线段设置不同的线宽/粗细？

嘿，这个坑我之前踩过！你遇到的lineWidth不生效的问题，本质上不是Three.js的bug，而是WebGL规范的限制——绝大多数主流浏览器的WebGL实现，都不支持设置大于1的线宽，哪怕你在LineBasicMaterial里写了lineWidth:25，最终渲染出来还是1px的线。

为什么会这样？ #

WebGL的核心基于OpenGL ES，而OpenGL ES 2.0及以上的规范里，明确说明glLineWidth只保证支持线宽为1的情况，大于1的线宽属于可选实现。所以大部分浏览器干脆就不支持这个特性，导致Three.js的lineWidth属性形同虚设。

给你两个可行的解决方案： #

方案1：用平面网格（Mesh）模拟粗线条（推荐单独调整单条线段）

如果需要单独控制某条线段的粗细，最稳妥的方式是放弃Line，改用Mesh配合PlaneGeometry来模拟线条。这样每条线段都能单独设置宽度，完全不受WebGL的限制。

修改你的代码示例，比如给正方形的某条边单独设置粗线：

function doubleSquareDraw(startX, startY, endX, endY, color) {
  const group = new THREE.Group(); // 先定义group，你之前的代码漏了这一步

  // 封装绘制单条粗线的函数
  function drawThickLine(x1, y1, x2, y2, lineColor, lineThickness) {
    const length = Math.hypot(x2 - x1, y2 - y1);
    const geometry = new THREE.PlaneGeometry(length, lineThickness);
    const material = new THREE.MeshBasicMaterial({ color: lineColor });
    const lineMesh = new THREE.Mesh(geometry, material);

    // 调整线条的位置和旋转角度，让它贴合两点连线
    lineMesh.position.set((x1 + x2) / 2, (y1 + y2) / 2, 0);
    const angle = Math.atan2(y2 - y1, x2 - x1);
    lineMesh.rotation.z = angle;

    return lineMesh;
  }

  // 绘制正方形四条边，第一条边设为25px粗，其他设为5px
  group.add(drawThickLine(startX, startY, endX, startY, color, 25));
  group.add(drawThickLine(endX, startY, endX, endY, color, 5));
  group.add(drawThickLine(endX, endY, startX, endY, color, 5));
  group.add(drawThickLine(startX, endY, startX, startY, color, 5));

  return group;
}

方案2：使用Three.js的Line2扩展（支持任意线宽）

Three.js提供了官方的Line2扩展，它基于Mesh实现线条，支持任意线宽且抗锯齿效果更好。不过需要额外引入三个扩展文件：

• LineGeometry.js
• LineMaterial.js
• Line2.js

如果要单独调整某条线段，需要把每条线拆成单独的Line2实例，示例代码如下：

// 假设已引入Line2相关扩展文件
function drawSingleThickLine(points, color, lineWidth) {
  const lineGeometry = new THREE.LineGeometry();
  lineGeometry.setPositions(points.flat()); // 将点数组转为一维数组

  const lineMaterial = new THREE.LineMaterial({
    color: color,
    linewidth: lineWidth, // 这里的linewidth完全生效
    dashed: false,
    worldUnits: false, // 2D场景下设置为false更方便控制尺寸
  });

  const line = new THREE.Line2(lineGeometry, lineMaterial);
  line.computeLineDistances(); // 必须调用此方法才能正确渲染
  return line;
}

小提醒 #

你原来的代码里有个小疏漏：最后return group;但group变量没有定义，记得先创建const group = new THREE.Group();再把线条添加进去哦。

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