如何让 Dashed THREE.MeshLine 工作？

Question

我正在尝试使用 THREE.MeshLine 来获得粗细的虚线。

我已经锁定示例并将此代码笔放在一起以展示我正在努力实现的目标：

你看到一条连续的白线，我想要一条虚线。

我正在为 material 设置参数：

const materialX = new MeshLineMaterial({
  color: 0xffffff,
  lineWidth: 3,
  // 0 -> no dash ; 1 -> half dashline length ; 2 -> dashline === length
  dashArray: 0.1,
  // 0.5 -> balancing ; 0.1 -> more line : 0.9 -> more void
  dashRatio: 0.5    
});

但是，即使这样也没有得到虚线。

如何让这条虚线起作用？

欢迎任何帮助！

谢谢

Answer 1

您可以使用 LineDashedMaterial 代替 MeshLineMaterial

const material = new THREE.LineDashedMaterial( {
    color: 0xffffff,
    linewidth: 1,
    scale: 1,
    dashSize: 3,
    gapSize: 1,
} );

Answer 2

需要在创建MeshLineMaterial时指定transparent到true来指定material是透明的。

const materialX = new MeshLineMaterial({
  color: 0xffffff,
  lineWidth: 3,
  // 0 -> no dash ; 1 -> alf dashline length ; 2 -> dashline === length
  dashArray: 0.1,
  // 0.5 -> balancing ; 0.1 -> more line : 0.9 -> more void
  dashRatio: 0.5,
  transparent: true,
});

参考：https://github.com/spite/THREE.MeshLine/issues/66

如何让 Dashed THREE.MeshLine 工作？

How can I get the Dashed THREE.MeshLine to work?

line

three.js