在threejs中为线条添加粗细答案

【问题标题】：Adding thickness to lines in threejs在threejs中为线条添加粗细
【发布时间】：2021-12-30 11:48:35
【问题描述】：

这是我的demo，我想添加 linewidth 以增加我的四边形的厚度。

我查看了这个question 并试图了解如何使用 LineMaterial 和 Line2。

他们似乎在演示中不起作用。

这是相关代码

   function QuadGeometry(w, h) {
      let pts = [
        [0.5, 0.5],
        [-0.5, 0.5],
        [-0.5, -0.5],
        [0.5, -0.5]
      ].map((p) => {
        return new THREE.Vector2(p[0], p[1]);
      });
      let g = new THREE.BufferGeometry().setFromPoints(pts);
      g.setIndex([0, 1, 2, 3, 0]);
      g.scale(w, h, 1);

      return g;
    }

    let g = QuadGeometry(
      THREE.MathUtils.randInt(15, 30),
      THREE.MathUtils.randInt(15, 30)
    );
    let m = new LineMaterial({
      color: "yellow",
      linewidth: 5
    });
    let quad = new Line2(g, m);

如您所见，四边形在这些更改中不可见

如果我用 LineBasicMaterial 和 Line 替换 quad 是可见的

我还发现它可以是bug，但我对three.js 非常陌生

codesandbox 中的任何编辑都可以展示给我。

【问题讨论】：

标签： javascript three.js geometry draw codesandbox

【解决方案1】：

您正在使用BufferGeometry 的实例来创建不支持的Line2 实例。您必须改用LineGeometry。

更新的代码框：https://codesandbox.io/s/static-forked-68lif?file=/index.html

【讨论】：