Solution for adjusting line width on Windows in Three.js

Question

Solution for adjusting line width on Windows in Three.js

I'm currently working on creating a dynamic 3D coordinate system using the Three.js library. My goal is to add some thickness to the axes, which I've been able to achieve by adjusting the LineBasicMaterial's linewidth parameter.

The code snippet below is functioning well for me as I am not using Windows:

    var scene = new THREE.Scene();                                              
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );                                                           

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    var triad = new THREE.Geometry();
    triad.vertices.push( new THREE.Vector3(  0,  0,  0 ) ); 
    triad.vertices.push( new THREE.Vector3( 10,  0,  0 ) );
    triad.vertices.push( new THREE.Vector3(  0,  0,  0 ) );
    triad.vertices.push( new THREE.Vector3(  0, 10,  0 ) );
    triad.vertices.push( new THREE.Vector3(  0,  0,  0 ) );
    triad.vertices.push( new THREE.Vector3(  0,  0, 10 ) );

    var line_mat = new THREE.LineBasicMaterial({'linewidth': 3});

    var frame = new THREE.Line(triad, line_mat, THREE.LinePieces);
    scene.add( frame );                       
    camera.position.z = 40;                        

    function render() {                    
        requestAnimationFrame(render);             
        frame.rotation.x += 0.1;            
        frame.rotation.y += 0.02;             
        renderer.render(scene, camera);                            
    }                                                                           
    render();

However, there seems to be an issue with setting the linewidth on Windows due to the ANGLE library, as discussed in this question: Thickness of lines using THREE.LineBasicMaterial

Could you suggest any workarounds that would allow me to display this correctly on a Windows operating system?

javascript three.js webgl

Answer 1

Answer №1

I found a solution to adjust the line width by creating a new method that takes in coordinates for where the line should be drawn. Within this method, I draw multiple lines around these coordinates. Here is the modified code snippet:

function drawLine(lineMaterial, x1, y1 , z1, x2, y2, z2, thickness){
    for (i = 0; i < thickness * 2; i++) {  
        var routerLine1Geometry = new THREE.Geometry();
        routerLine1Geometry.vertices.push( new THREE.Vector3(x1, y1+i/4, z1));
        routerLine1Geometry.vertices.push( new THREE.Vector3(x2, y2+i/4, z2)  );
        var routerLine1 = new THREE.Line( routerLine1Geometry, lineMaterial );
        scene.add(routerLine1);
    }
    for (i = 0; i < thickness * 2; i++) { 
        var routerLine1Geometry = new THREE.Geometry();
        routerLine1Geometry.vertices.push( new THREE.Vector3(x1, y1-i/4, z1)  );  
        routerLine1Geometry.vertices.push( new THREE.Vector3(x2, y2-i/4, z2)  );
        var routerLine1 = new THREE.Line( routerLine1Geometry, lineMaterial );
        scene.add(routerLine1);
    }
}

Please let me know if you encounter any issues with this implementation.

Answer 2

I found a solution to adjust the line width by creating a new method that takes in coordinates for where the line should be drawn. Within this method, I draw multiple lines around these coordinates. Here is the modified code snippet:

function drawLine(lineMaterial, x1, y1 , z1, x2, y2, z2, thickness){
    for (i = 0; i < thickness * 2; i++) {  
        var routerLine1Geometry = new THREE.Geometry();
        routerLine1Geometry.vertices.push( new THREE.Vector3(x1, y1+i/4, z1));
        routerLine1Geometry.vertices.push( new THREE.Vector3(x2, y2+i/4, z2)  );
        var routerLine1 = new THREE.Line( routerLine1Geometry, lineMaterial );
        scene.add(routerLine1);
    }
    for (i = 0; i < thickness * 2; i++) { 
        var routerLine1Geometry = new THREE.Geometry();
        routerLine1Geometry.vertices.push( new THREE.Vector3(x1, y1-i/4, z1)  );  
        routerLine1Geometry.vertices.push( new THREE.Vector3(x2, y2-i/4, z2)  );
        var routerLine1 = new THREE.Line( routerLine1Geometry, lineMaterial );
        scene.add(routerLine1);
    }
}

Please let me know if you encounter any issues with this implementation.

Answer 3

Answer №2

If you want to run WebGL using native gl, you'll need to install OpenGL on your Windows machine.

There are a few different ways to do this:

For Google Chrome, you can use the "solution" of running Chrome with the --use-gl=desktop command-line argument. More information can be found at
Alternatively, for Firefox, you can simply type about:config in the navigation bar and search for the preference webgl.prefer-native-gl, setting it to true. Additional details can be found at

Answer 4

If you want to run WebGL using native gl, you'll need to install OpenGL on your Windows machine.

There are a few different ways to do this:

For Google Chrome, you can use the "solution" of running Chrome with the --use-gl=desktop command-line argument. More information can be found at
Alternatively, for Firefox, you can simply type about:config in the navigation bar and search for the preference webgl.prefer-native-gl, setting it to true. Additional details can be found at

Answer 5

Answer №3

When Angle is utilized, DirectX handles the rendering process. Switching to native gl may even result in a performance boost, depending on your graphics card's OpenGL capabilities.

To view the current WebGL settings of your browser "under the hood," you can visit this website. This site will also indicate whether your browser currently utilizes angle for WebGL.

For a more detailed explanation on how to switch to native gl, you can refer to this website.

Answer 6

When Angle is utilized, DirectX handles the rendering process. Switching to native gl may even result in a performance boost, depending on your graphics card's OpenGL capabilities.

To view the current WebGL settings of your browser "under the hood," you can visit this website. This site will also indicate whether your browser currently utilizes angle for WebGL.

For a more detailed explanation on how to switch to native gl, you can refer to this website.

Answer 7

Answer №4

One of the many options available is using cylinders to create flat lines in the xy plane:

function createline(x1, y1, x2, y2, z, w, color) { // function to generate a line
  // Call scene.add(createline(x1, y1, x2, y2, z, w, 0xrrggbb)) like this
  if (typeof color == "undefined") color = 0xffffff;
  color = new THREE.Color( color );
  var distance = Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)); // calculate length
  var geometry = new THREE.Geometry;
  var material = new THREE.MeshBasicMaterial({ color:color, side:THREE.DoubleSide });
  var u1=w*.35, u2=w*.5, v1=0, v2=w*.15, v3=w*.5, v4=w*.85, v5=w; // define rounded ends
  configure(geometry, 0, -w/2, z, [[-u1, v2],[-u2, v3],[-u1, v4],[0, v5],[ distance, v5]]); // left side
  configure(geometry, distance,  w/2, z, [[ u1,-v2],[ u2,-v3],[ u1,-v4],[0,-v5],[-distance,-v5]]); // right side
  geometry.rotateZ(Math.atan2(y2-y1,x2-x1)); // rotate before translation
  geometry.translate(x1,y1,0);               // translate after rotation
  var mesh = new THREE.Mesh(geometry, material);
  return mesh;
  function configure(shape, x0, y0, z0, pts) { // add vertices and faces based on x0, y0, z0
    // pts should be at least 2 points relative to x0,y0 [[x1,y1],[x2,y2],..]
    shape.vertices.push(new THREE.Vector3(x0, y0, z0)); // base point
    var indexBase = shape.vertices.length-1; // add to vertices
    for (var i=0; i < pts.length; i+=1) {
      shape.vertices.push(new THREE.Vector3(x0+pts[i][0], y0+pts[i][1], z0));
      if (i > 0) shape.faces.push(new THREE.Face3( indexBase, indexBase+i, indexBase+i+1) );
    }
  }
}

Answer 8

One of the many options available is using cylinders to create flat lines in the xy plane:

function createline(x1, y1, x2, y2, z, w, color) { // function to generate a line
  // Call scene.add(createline(x1, y1, x2, y2, z, w, 0xrrggbb)) like this
  if (typeof color == "undefined") color = 0xffffff;
  color = new THREE.Color( color );
  var distance = Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)); // calculate length
  var geometry = new THREE.Geometry;
  var material = new THREE.MeshBasicMaterial({ color:color, side:THREE.DoubleSide });
  var u1=w*.35, u2=w*.5, v1=0, v2=w*.15, v3=w*.5, v4=w*.85, v5=w; // define rounded ends
  configure(geometry, 0, -w/2, z, [[-u1, v2],[-u2, v3],[-u1, v4],[0, v5],[ distance, v5]]); // left side
  configure(geometry, distance,  w/2, z, [[ u1,-v2],[ u2,-v3],[ u1,-v4],[0,-v5],[-distance,-v5]]); // right side
  geometry.rotateZ(Math.atan2(y2-y1,x2-x1)); // rotate before translation
  geometry.translate(x1,y1,0);               // translate after rotation
  var mesh = new THREE.Mesh(geometry, material);
  return mesh;
  function configure(shape, x0, y0, z0, pts) { // add vertices and faces based on x0, y0, z0
    // pts should be at least 2 points relative to x0,y0 [[x1,y1],[x2,y2],..]
    shape.vertices.push(new THREE.Vector3(x0, y0, z0)); // base point
    var indexBase = shape.vertices.length-1; // add to vertices
    for (var i=0; i < pts.length; i+=1) {
      shape.vertices.push(new THREE.Vector3(x0+pts[i][0], y0+pts[i][1], z0));
      if (i > 0) shape.faces.push(new THREE.Face3( indexBase, indexBase+i, indexBase+i+1) );
    }
  }
}

Solution for adjusting line width on Windows in Three.js

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for transferring a JavaScript variable to a Java servlet using the doPost method

Customize the default directory for local node modules installation in node.js using npm

Gulp is showing an error of "Module Not Found" despite the module being present in the project

What is the best way to create an index for a user-provided value in a textbox

Engaging in payment processing

Creating a component in Vue to showcase Axios, based on a straightforward example from the documentation

At what point does Math.random() begin to cycle through its values?

Can you identify the date stored in this JSON object?

Updating form in react requires a double click

Learn how to subscribe to Azure Event Grid using Angular without the need for a backend service layer

Hide all the div elements on the web page and only display one when a button is clicked

Create a separate server session specifically for handling an ajax request?

Execute angular.js as a callback function, such as within a $.ajax call

What are the advantages of using HttpClient compared to fetch?

Ways to determine if the keys of an object are present in an array, filtered by the array key

The JavaScript code is failing to retrieve the longitude and latitude of the location on a mobile browser

The process of incorporating injected JavaScript into an existing function

How can one effectively restrict the number of tags allowed in a WYSIWYG editor?

What is the best way to display HTML content inside a pop-over window?

dynamically change the information in AngularJS