Is it possible to display the wireframe of the object and also the solid color of its faces on the same object? I found a way using a clone of the object and assign different materials e.g
var geometry = new THREE.PlaneGeometry(plane.width, plane.height,width - 1, height - 1); var materialWireframe = new THREE.MeshPhongMaterial({color:"red",wireframe:true}); var materialSolid = new THREE.MeshPhongMaterial({color:"green",wireframe:false}); var plane = new THREE.Mesh(geometry, materialWireframe ); var plane1 = plane.clone(); plane1.material = materialSolid ; plane1.material.needsUpdate = true;
any thoughts?
To render both a model and its wireframe, you can use a pattern like this one:
// mesh var material = new THREE.MeshPhongMaterial( { color: 0xff0000, polygonOffset: true, polygonOffsetFactor: 1, // positive value pushes polygon further away polygonOffsetUnits: 1 } ); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ) // wireframe var geo = new THREE.EdgesGeometry( mesh.geometry ); // or WireframeGeometry var mat = new THREE.LineBasicMaterial( { color: 0xffffff } ); var wireframe = new THREE.LineSegments( geo, mat ); mesh.add( wireframe );
The use of polygonOffset
will help prevent z-fighting between the mesh material and the wireframe line. Consequently, the wireframe will look a lot better.
three.js r.126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With