How can I control line width using the THREE.js createMultiMaterialObject function?

Question

I'm experimenting with the createMultiMaterialObject function in THREE.js to create shaded objects that also display a wireframe. The problem is the lines appear broken & don't seem to respond to the wireframeLinewidth parameter.

My materials are defined as follows:

var mat1 = new THREE.MeshBasicMaterial( { color: 0xd02000, transparent: true, blending: THREE.AdditiveBlending } )
var blackLines = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 4 } );

And the object is here:

 var object = THREE.SceneUtils.createMultiMaterialObject( new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ), materials );
                object.position.set( -100, 150, 0 );
                scene.add( object );

But this produces this result:

Any help would be appreciated. Thanks!

Answer 1

Your code is fine. Are you running Windows? If so, it is possibly an ANGLE issue, in which case the line width cannot be changed. See this related question.

If you are unable to increase the line width, a work-around in your case is to make the wireframe mesh just a bit larger than the solid mesh, like so:

object.children[ 1 ].scale.multiplyScalar( 1.01 );

If you do that, there will be no more broken lines and it will be beautiful. :-)

three.js r.55