CODEWITHSUNDEEP
javascriptwebglthree.js
Dimitris
Dimitris

Reputation: 4339

How to change the thickness of lines using Three.js

I am using the code below to create hundreds of lines in my Three.js scene:

edgeGeometry[i] = new THREE.Geometry();
edgeGeometry[i].vertices[0] = v(x1,y1,z1);
edgeGeometry[i].vertices[1] = v(x2,y2,z2);
edgesMat[i] = new THREE.LineBasicMaterial({
    color: 0x6699FF, linewidth: 1, fog:true});
edge[i] = new THREE.Line(edgeGeometry[i], edgesMat[i]);
edge[i].type = THREE.Lines;
scene2.add(edge[i]);

It works fine, but when I change the value of linewidth to a bigger OR smaller value, I see NO difference in the scene.

How do I change the thickness of the lines?

Upvotes: 50

Views: 59667

Answers (9)

raulsi
raulsi

Reputation: 41

You can use CanvasRenderer instead of Webglrenderer. Check out the official documentation here where each shape has a border of linewidth = 10;

Upvotes: 1

mrdoob
mrdoob

Reputation: 19592

This doesn't work on Windows because it wasn't implemented in the ANGLE project.

Upvotes: 21

Wilt
Wilt

Reputation: 44316

Note: Native OpenGL is no longer a valid solution since the latest OpenGL versions no longer support line thickness either. Check gman's answer for more information. This means that, if you want to use line thickness, the option below is the way to go:

Use the THREE.MeshLine class

This THREE.MeshLine class on GitHub is a nice workaround. It comes with a special THREE.MeshLineMaterial class. According to the docs it is as simple as:

  • Create and populate a geometry
  • Create a THREE.MeshLine and assign the geometry
  • Create a THREE.MeshLineMaterial
  • Use THREE.MeshLine and THREE.MeshLineMaterial to create a THREE.Mesh

Upvotes: 37

Azure
Azure

Reputation: 134

Why not set the opacity to something like 0.1? NOTE: This only works if you are giving borders to something, if there's nothing behind it the it won't work.

Upvotes: -1

Hitesh Sahu
Hitesh Sahu

Reputation: 45042

I use TubeGeometry to create a Thick line between two points:

See Green lines in Helix

enter image description here

// line material
var lineMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 });


let startVector = new THREE.Vector3(
    RADI * Math.cos(t),
    RADI * Math.sin(t),
    3 * t
  );
  let endVector = new THREE.Vector3(
    RADI * Math.cos(t + 10),
    RADI * Math.sin(t + 10),
    3 * t
  );

  let linePoints = [];
  linePoints.push(startVector, endVector);

  // Create Tube Geometry
  var tubeGeometry = new THREE.TubeGeometry(
    new THREE.CatmullRomCurve3(linePoints),
    512,// path segments
    0.5,// THICKNESS
    8, //Roundness of Tube
    false //closed
  );

  let line = new THREE.Line(tubeGeometry, lineMaterial);
  scene.add(line);

Upvotes: 13

danvk
danvk

Reputation: 16893

You can achieve the same effect using extrude-polyline to generate a simplicial complex for the thickened (poly)line and three-simplicial-complex to convert this to a three.js Mesh:

const THREE = require('three');
const extrudePolyline = require('extrude-polyline');
const Complex = require('three-simplicial-complex')(THREE);

function thickPolyline(points, lineWidth) {
  const simplicialComplex = extrudePolyline({
    // Adjust to taste!
    thickness: lineWidth,
    cap: 'square',  // or 'butt'
    join: 'bevel',  // or 'miter',
    miterLimit: 10,
  }).build(points);

  // Add a z-coordinate.
  for (const position of simplicialComplex.positions) {
    position[2] = 0;
  }

  return Complex(simplicialComplex);
}

const vertices = [[0, 0], [10, 0], [10, 10], [20, 10], [30, 00]];
const geometry = thickPolyline(vertices, 10);

const material = new THREE.MeshBasicMaterial({
  color: 0x009900,
  side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

If you want to texture map the polyline, things get a little more complicated.

Upvotes: 1

Andrew
Andrew

Reputation: 1

Thanks to Wilt's answer for pointing me in the right direction with THREE.MeshLine.

It can be slightly trickier than they make it out to be, however... So here's my solution following their docs and their demo code very carefully... (assuming you've already included Three and MeshLine):

    renderer = new THREE.WebGLRenderer({ canvas });

    //...

    function createCircle(resolution) {
        let circleGeometry = new THREE.Geometry();
        for (let rotation = 0; rotation <= Math.PI * 2.0; rotation += Math.PI * 0.1) {
            circleGeometry.vertices.push(
                new THREE.Vector3(Math.cos(rotation), Math.sin(rotation), 0));
        }
        let circleLine = new MeshLine();
        circleLine.setGeometry(circleGeometry);
        //Bonus: parabolic width! (See Z rotation below.)
        //circleLine.setGeometry(circleGeometry, function(point) {
            //return Math.pow(4 * point * (1 - point), 1);
        //});

        //Note: resolution is *required*!
        return new THREE.Mesh(circleLine.geometry,
            new MeshLineMaterial({
                color: 'blue',
                resolution,
                sizeAttenuation: 0,
                lineWidth: 5.0,
                side: THREE.DoubleSide
            }));
    }

    let circle = createCircle(new THREE.Vector2(canvas.width, canvas.height));
    circle.rotation.x = Math.PI * 0.5;
    circle.position.y = 20.0;
    scene.add(circle);

    //In update, to rotate the circle (e.g. if using parabola above):
    world.circle.rotation.z += 0.05;

With size attenuation off and using THREE.DoubleSide, like I did above, the circle will look like a nice, consistent circle no matter where you're looking at it from (not "true 3D").

For just a line, you can obviously easily adapt.

Upvotes: 0

user128511
user128511

Reputation:

This is no longer an issue just in ANGLE it's an issue on all platforms. Browsers needed to switching to the OpenGL 4+ core profile to support WebGL2 and the OpenGL 4+ core profile does not support line widths greater than 1. From the OpenGL 4.0+ spec, section E.2.1

E.2.1 Deprecated But Still Supported Features

The following features are deprecated, but still present in the core profile. They may be removed from a future version of OpenGL, and are removed in a forward compatible context implementing the core profile.

  • Wide lines - LineWidth values greater than 1.0 will generate an INVALID_VALUE error.

To draw thicker lines you need generate geometry. For three.js there is this library (pointed out by Wilt as well)

https://github.com/spite/THREE.MeshLine

Upvotes: 5

user2090712
user2090712

Reputation: 121

This occurs in Windows Chrome and Firefox, both using ANGLE (WebGL to DirectX wrapper).

The issue is still not solved by the ANGLE project. You can star the issue here to get higher priority and get a notification if it's going to be implemented:

https://code.google.com/p/angleproject/issues/detail?id=119

Upvotes: 12

Related Questions