在 threejs 中为线条添加粗细

Question

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

我看过这个 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);

如您所见，quad 在这些更改后不可见

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

我也发现它可以是 bug 但我是 three.js

的新手

codesandbox 中的任何编辑都非常适合向我展示。

Answer 1

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

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

在 threejs 中为线条添加粗细

Adding thickness to lines in threejs

javascript

geometry

draw

three.js

codesandbox