CODEWITHSUNDEEP
javascriptthree.js
JJ Gerrish
JJ Gerrish

Reputation: 882

Three.js r91 - how do I use the new linewidth property to fatten/widen lines?

I have just encountered a scenario in the project I am building in which I needed to generate wireframe-style lines with a transparent inside to "outline" the shape as if it is drawn in a comic/cartoon style, instead of creating the actual solid object itself.

These outlines need to be thicker than the default linewidth of LineBasicMaterial. It was a known issue that linewidthdid not actually work/do anything for LineBasicMaterial, and so I was stumped on how I would solve my issue.

I was previously using r90, but to my excitement version r91 of three.js was very recently released and with it comes brand new "fat lines" as they are called in the example. This seems like the perfect solution to my problem, as it basically just adds the ability to increase the linewidth again.

However, after upgrading to r91, looking through the code for the "fat lines" example, and trying to copy what I saw in there, I am having no luck with linewidth

Here is my code prior to upgrading to r91:

var Pavement = function() {
    this.mesh = new THREE.Object3D();
    this.mesh.name = "pavement";

    geomPavement = new THREE.BoxBufferGeometry(100, 25, 20000);
    var edgesPavement = new THREE.EdgesGeometry( geomPavement );
    var linePavement = new THREE.LineSegments( edgesPavement, new THREE.LineBasicMaterial( { color: Colors.black, linewidth: 10 } ) );
    matPavement = new THREE.MeshPhongMaterial({color: Colors.black});
    PavementObject = new THREE.Mesh(geomPavement, matPavement);

    PavementObject.receiveShadow = true;
    PavementObject.castShadow = true;

    this.mesh.add(linePavement);
}

a little messy, but the basic premise is that I was previously creating the object (and no lines), hence the PavementObject = new THREE.Mesh(geomPavement, matPavement);, but then decided to attempt the line approach by getting the edges of the BoxGeometry and using them to create LineSegments with a LineBasicMaterial. I kept the code for the Mesh creation as I may need the object to be non-transparent, and so I can use the Mesh as a "fill" to colour in between the lines.

After upgrading to r91 I thought it would be as simple as the following:

var Pavement = function() {
    this.mesh = new THREE.Object3D();
    this.mesh.name = "pavement";

    geomPavement = new THREE.BoxBufferGeometry(100, 25, 20000);
    var edgesPavement = new THREE.EdgesGeometry( geomPavement );
    var linePavement = new THREE.LineSegments2( edgesPavement, new THREE.LineMaterial( { color: Colors.black, linewidth: 10 } ) );
    matPavement = new THREE.MeshPhongMaterial({color: Colors.black});
    PavementObject = new THREE.Mesh(geomPavement, matPavement);
    PavementObject.receiveShadow = true;
    PavementObject.castShadow = true;
    this.mesh.add(linePavement);
}

All I did was change LineBasicMaterial to LineMaterial, and LineSegments to LineSegments2

What I need

I am looking for a way to increase the linewidth of my LineSegements, ideally using the new "fat lines" from r91. I imagine the reason this doesn't work for me is due to a lack of understanding & a lack of documentation of the new version r91, and it is probably something very simple, but any help is appreciated!

ALSO

In the code for the example that I linked to, each new /examples/js/lines/... file is individually linked to via a script tag. I did this in my project just in case, but is this necessary? Is the functionality not in the main build file or do I have to include it via script tags, like I have to for OrbitControls for example.

Thank you.

Upvotes: 4

Views: 3532

Answers (1)

WestLangley
WestLangley

Reputation: 104763

Support for fat lines is not currently fully-integrated into the core library; it is just an example, for now.

You can use the following pattern to render EdgesGeometry with fat lines:

var geomPavement = new THREE.BoxBufferGeometry( 10, 2, 20 );

var edgesPavement = new THREE.EdgesGeometry( geomPavement );

var lineGeometry = new THREE.LineSegmentsGeometry().setPositions( edgesPavement.attributes.position.array );

var lineMaterial = new THREE.LineMaterial( { color: 0xffffff, linewidth: 10 } );

lineMaterial.resolution.set( window.innerWidth, window.innerHeight ); // important, for now...

var linePavement = new THREE.LineSegments2( lineGeometry, lineMaterial );

scene.add( linePavement );

three.js r.91

Upvotes: 10

Related Questions