Clever Geek Handbook

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

I am experimenting with the createMultiMaterialObject function in THREE.js to create shaded objects that also render the wireframe. The problem is the lines appear to be broken and 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 leads to this result: Bad WireFrame on MultiMaterial

Any help would be greatly appreciated. Thank!

+3


source to share


1 answer


Your code is fine. Are you using Windows? If so, it might be an ANGLE problem, in which case the line width cannot be changed. See the related question .

If you cannot increase the line width, then in your case you need to make the wireframe mesh slightly larger than the solid mesh, for example:

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


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

three.js r.55

+2


source






More articles:


All Articles