👋

THREE.LineDashedMaterialを複数回描画して太い線にする

2024/04/07に公開

THREE.LineDashedMateriallinewidth を指定しても太さが変わりません。
綺麗な実装でないかもですが、scaleを変えて複数回描画したら簡単にできると思い試してみました。

青線: LineSegmentsが1つだけ、赤線: LineSegmentsが複数

以下のようなコードになります。

// LineSegmentsが1つだけの場合
const sampleGeometry = new THREE.BoxGeometry(2, 2, 2);
const sampleMaterial = new THREE.LineDashedMaterial({
  color: 0x0000ff,
  linewidth: 1,
  scale: 1,
  dashSize: 0.5,
  gapSize: 0.1,
});
const sampleCube = new THREE.LineSegments(new THREE.EdgesGeometry(sampleGeometry), sampleMaterial);
sampleCube.position.set(-1.5, 0, 0);
sampleCube.computeLineDistances();
scene.add(sampleCube);

// LineSegmentsが複数ある場合
const fatLineCube = sampleCube.clone();
fatLineCube.material = new THREE.LineDashedMaterial({
  color: 0xff0000,
  linewidth: 1,
  scale: 1,
  dashSize: 0.5,
  gapSize: 0.1,
});
fatLineCube.position.set(1.5, 0, 0);
scene.add(fatLineCube);

// FIXME: この値は自分の環境に合わせて調整する
const scales = [1.001, 1.002, 1.003, 1.004, 1.005];
for (let i = 0; i < scales.length; i++) {
  const childCube = fatLineCube.clone();
  childCube.position.set(0, 0, 0);
  childCube.scale.setScalar(scales[i]);
  fatLineCube.add(childCube);
}

Discussion