👋
THREE.LineDashedMaterialを複数回描画して太い線にする
THREE.LineDashedMaterial
は linewidth
を指定しても太さが変わりません。
綺麗な実装でないかもですが、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