As I was working on my project, I encountered a situation where I needed to create wireframe-style lines with transparency inside to give the appearance of outlining shapes in a comic or cartoon style without actually creating solid objects.
These outlines required a thickness greater than the default linewidth provided by LineBasicMaterial. Since linewidth did not function properly with LineBasicMaterial, I was unsure how to proceed.
Prior to this issue, I had been using r90. Fortunately, the release of version r91 of three.js introduced "fat lines," which seemed like a perfect solution for increasing the line thickness. However, after upgrading to r91 and attempting to implement fat lines based on an example code, I faced difficulties getting the linewidth to work.
This is a snippet of my code before the upgrade 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);
}
Although my code may seem cluttered, it basically involved creating objects without lines initially, then attempting to add line features later by extracting edges from BoxGeometry and utilizing them to make LineSegments with a LineBasicMaterial. The Mesh creation remained to allow potential non-transparency options and act as a color fill between the lines.
Post-upgrade to r91, I attempted the following simplification:
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);
}
The change simply involved swapping LineBasicMaterial for LineMaterial and LineSegments for LineSegments2.
Seeking Assistance:
I am looking for guidance on how to increase the linewidth of my LineSegments, preferably using the new "fat lines" feature in r91. It appears that my struggle stems from a lack of understanding and documentation for the latest version, and any help would be greatly appreciated!
Additional Query:
In the example's code that I referenced, each new file linked individually via script tags. I followed suit in my project, but I wonder if this step is necessary. Does the functionality not reside in the main build file, or must it be included through script tags similar to OrbitControls, for instance?
Thank you.