WebGL Fat Line Malformation

Questions
1

I’m attempting to use the WebGL fat lines like in this example here: https://github.com/mrdoob/three.js/blob/3a324a69e3101407e24822fda1efdaf87fe77025/examples/webgl_lines_fat.html

Whenever I add a line to the scene they appear as large flat circles centered around the line vertices. Image and code snippet below.

threejs_scrot
threejs_scrot1383×982 397 KB 

var pos1 = new THREE.Vector3().setFromSphericalCoords(1000, phi, theta);
// user moves the camera
var pos2 = new THREE.Vector3().setFromSphericalCoords(1000, phi, theta);
var positions = [pos1.x, pos1.y, pos1.z, pos2.x, pos2.y, pos2.z];
var geometry = new THREE.LineGeometry();
var matLine = new THREE.LineMaterial( {
  color: 0xffffff,
  linewidth: 5,
  vertexColors: THREE.VertexColors,
  dashed: false
} );
geometry.setPositions(positions)
line = new THREE.Line2( geometry, matLine );
scene.add(line)

What have I got wrong here? Using regular Geometry and LineBasicMaterial objects works with a similar implementation in my application, I just can’t affect the line width on Windows using that implementation. Thanks!

2

@abion136 you forgot to set the resolution of the fat line mesh:
matLine.resolution.set( window.innerWidth, window.innerHeight ); // resolution of the viewport

2 Likes