Visualizza wireframe e tinta unita

È ansible visualizzare il wireframe dell’object e anche il colore solido dei suoi volti sullo stesso object? Ho trovato un modo di usare un clone dell’object e di assegnare materiali diversi, ad es

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; 

qualche idea?

Per rendere sia un modello che il suo wireframe, puoi usare un modello come questo:

 // 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, linewidth: 2 } ); var wireframe = new THREE.LineSegments( geo, mat ); mesh.add( wireframe ); 

L’uso di polygonOffset contribuirà a prevenire z-fighting tra il materiale mesh e la linea wireframe. Di conseguenza, il wireframe apparirà molto meglio.

fiddle: http://jsfiddle.net/tfjvggfu/24/

EDIT: aggiornato a three.js r.82

Per fare ciò, è ansible utilizzare uno shader di frammenti GLSL che modifichi il colore del frammento quando il frammento si trova vicino a un bordo del triangolo. Ecco lo shader GLSL che sto usando. Come input, prende le coordinate baricentriche del frammento nel triangolo e una maschera di bordo che seleziona per ogni spigolo se deve essere disegnata o meno. (rem: ho dovuto usarlo con il profilo di compatibilità per ragioni di compatibilità con le versioni precedenti, se non vuoi farlo, può essere facilmente adattato):

(fonte del frammento)

 #version 150 compatibility flat in float diffuse; flat in float specular; flat in vec3 edge_mask; in vec2 bary; uniform float mesh_width = 1.0; uniform vec3 mesh_color = vec3(0.0, 0.0, 0.0); uniform bool lighting = true; out vec4 frag_color; float edge_factor(){ vec3 bary3 = vec3(bary.x, bary.y, 1.0-bary.x-bary.y); vec3 d = fwidth(bary3); vec3 a3 = smoothstep(vec3(0.0,0.0,0.0), d*mesh_width, bary3); a3 = vec3(1.0, 1.0, 1.0) - edge_mask + edge_mask*a3; return min(min(a3.x, a3.y), a3.z); } void main() { float s = (lighting && gl_FrontFacing) ? 1.0 : -1.0; vec4 Kdiff = gl_FrontFacing ? gl_FrontMaterial.diffuse : gl_BackMaterial.diffuse; float sdiffuse = s * diffuse; vec4 result = vec4(0.1, 0.1, 0.1, 1.0); if(sdiffuse > 0.0) { result += sdiffuse*Kdiff + specular*gl_FrontMaterial.specular; } frag_color = (mesh_width != 0.0) ? mix(vec4(mesh_color,1.0),result,edge_factor()) : result; } 

Per evitare di clonare il mio object ho usato un modello del genere:

 var mat_wireframe = new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true}); var mat_lambert = new THREE.MeshLambertMaterial({color: 0xffffff, shading: THREE.FlatShading}); var meshmaterials = [ mat_wireframe, mat_lambert ]; 

e poi l’ho applicato alla mia mesh in questo modo:

 var myMesh = THREE.SceneUtils.createMultiMaterialObject( mesh_geometry, meshmaterials ); scene.add( myMesh ) ; 

Spero possa aiutare …