Three JS how to add color and line thickness to mesh loaded with GLTFLoader

Questions
, ,
1

So far I managed to load a mesh with GLTFLoader and turn it into a wireframe. I’m stuck at the part where I want to color it and give it a line thickness. I don’t completely understand how to use traverse().

My code so far:

var loader = new THREE.GLTFLoader(); loader.load('model.glb', handle_load);

var mesh;

function handle_load(gltf) {
  mesh = gltf.scene;
  mesh.traverse((node) => {
    if (!node.isMesh) return;
    node.material.wireframe = true;
  });
  scene.add(mesh);
  mesh.position.z = 2;
}
2

The material will be a THREE.MeshStandardMaterial, so you can use any of the options there (like material.color.setHex( 0xFF0000 )) to change its appearance. Note the warning about wireframeLinewidth, " Due to limitations of the OpenGL Core Profile with the WebGL renderer on most platforms linewidth will always be 1 regardless of the set value.".

There are ways around that, but they vary in difficulty and performance-intensiveness: