LineMaterial linewidth affected by aspect ratio?

Questions
1

I’m trying to create horizontal and vertical dimensions on my model using LineSegmentsGeometry, LineSegments2 and LineMaterial.
It works quite well, but it seems that the rendered width of the lines are affected by the current aspect ratio of the window or canvas. In landscape orientation the vertical lines are thicker and in portrait mode the horizontal lines are thicker.
I’m using version 0.160 in this project and have tested on chrome and firefox on windows 10 with the same results.

Any tips on how to get an uniform width of the lines?

image
image741×756 101 KB

This is the code for creating a typical dimension:
const materialLineBody = new LineMaterial({
color: “#1f5e88”,
linewidth: .002,
});

const geometryUtvHoyde = new LineSegmentsGeometry().setPositions([
4.2, -0.48, 1.2, 4.2, 3.74, 1.2,
3.8, -0.48, 1.2, 4.24, -0.48, 1.2,
3.8, 3.74, 1.2, 4.24, 3.74, 1.2]);
const utvHoydeBodyLine = new LineSegments2(geometryUtvHoyde, materialLineBody);
utvHoydeBodyLine.computeLineDistances();

My only code dealing with aspect ratio to my knowledge is this:
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
onSceneChange()
}

2

You may need to adjust the .resolution property of the lines’ materials when the aspect changes. Something like:

myLineMaterial.resolution.set( width, height );

where width and height are the sizes of the canvas. Look at any of the “fat” examples in the Three.js site (e.g. three.js webgl - lines - fat)

3

Thanks! I ended up using

materialLineBody.resolution.set((window.innerWidth / window.innerHeight), 1)

which works very well