CODEWITHSUNDEEP
three.js
Randy Hall
Randy Hall

Reputation: 8167

Stroke width, or line material in three-globe

Just trying to up the stroke width a little on the country polygons for three-globe.

There doesn't appear to be a helper function for this material or any settings beyond color.

I had the bright idea of looping through all the children of the globe object, very crude but:

for (let i in Globe.children[0].children[4].children){
    const child = Globe.children[0].children[4].children[i];
    child.children[1].material.linewidth = 3;
    child.children[1].material.color = new THREE.Color('rgba(255,255,255,1)');
}

This appears to have no effect on the line width. It does, however, successfully change the color, so I think I'm close, though I really hope there's a better way than this.

Upvotes: 0

Views: 713

Answers (1)

M -
M -

Reputation: 28502

I'm sorry to inform you that the .linewidth property is very poorly supported due to OpenGL limitations. You can see an explanation in the LineBasicMaterial.linewidth documentation

Due to limitations of the OpenGL Core Profile with the WebGL renderer on most platforms linewidth will always be 1 regardless of the set value.

You'll run into this issue if you're using THREE.Line or THREE.LineSegments. However, there is an alternative you could use with THREE.Line2, which circumvents the limitation by drawing lots of instanced gl.TRIANGLES instead of gl.LINE. You can see it in action in this example. In fact, there are 3 demos of fat lines, each one with a slightly different implementation. You would then have to substitute the outlines of the country with your own fat lines.

Upvotes: 1

Related Questions