Need help to create a dashed line

Questions
, ,
1

Hi guys,
I really need help to create dashed lines like this https://varun.ca/three-js-particles/ (" Dashed line with animated offset" part
He use react, so my code is not exactly the same, and i don’t use as many parameters, i want a simple display for a first time, with one line

Here is my code :

var radiusVarience = () => random(0.2, 1)

function sparkLines(lines){

    console.log(lines)
    var linesGeometry = new meshLine.MeshLine({
        points : lines[0]
    })
    var linesMaterial = new meshLine.MeshLineMaterial({
        lineWidth : 0.5,
        dashRatio : 0.95,
        dashArray : 0.1,
        dashOffset : 0.003,
        color : "red"
    })

    var line = new THREE.Mesh(linesGeometry, linesMaterial)
    line.position.x = 0
    line.position.y = 0
    line.position.z = -1

    scene.add(line)
}

function sparks(count, radius = 0.1){
    const lines = new Array(count).fill().map((_, index)=>{
        const pos = new THREE.Vector3(
            Math.sin(0) * radius * radiusVarience(),
            Math.cos(0) * radius * radiusVarience(),
            Math.sin(0) * Math.cos(0) *  radius * radiusVarience()
        )
        const points = new Array(30).fill().map((_, index)=>{
            const angle = (index/20) * radius * Math.PI * 2

            return pos.add(
                new THREE.Vector3(
                    Math.sin(angle) * radius * radiusVarience(),
                    Math.cos(angle) * radius * radiusVarience(),
                    Math.sin(angle) * Math.cos(0) * radius * radiusVarience()
                )
            ).clone()
        })
        const curve = new THREE.CatmullRomCurve3(points).getPoints(1000)
        return curve
    })

    sparkLines(lines)
}

sparks(1)

So i use the same material as him (link a little further down his page).

So i don’t have errors, but my line is not displayed.

Here is the content of lines[0] :

linescontent
linescontent626×545 26.1 KB

and the position of the mesh is (0, 0, 0), the camera position is (0,0,1)

Thank you for your help :pray:

2

Any chance to provide a live code example? codepen, codesandbox etc.

4

i finally succeed ! i changed the geometry by THREE.LineMesh found on the web, and given a flat array to the points property