javascript - texture - Material de estructura metálica Three.JS: todos los polígonos versus solo los bordes

three.js editor

Question

Estoy usando ThreeJS en un proyecto y me di cuenta de que las versiones anteriores reproducen wireframes de forma diferente que las versiones más nuevas, y no puedo averiguar cómo revertir (que prefiero).

Este violín que utiliza la versión 54 representa solo los bordes exteriores del objeto dibujados con un material de estructura alámbrica: http://jsfiddle.net/ksRyQ/ o como se muestra aquí, en caso de que sea específico de la plataforma (estoy en mac cromo):

Por otro lado, cuando ejecuto el mismo código localmente usando la versión más nueva r61, veo el borde de cada polígono, como en:

el código en ambos casos es simple:

material = new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
});

Estoy seguro de que podría sacar el cubo de las líneas o algo así, pero prefiero entender el problema.

¿Alguna pista? ¿Hay algún ajuste para esto o algo que pueda modificarse? En segundo lugar, notará que ahora mismo el código está usando el representador de lienzo, aunque planeo usar el renderizador de webGL, pero el mismo fenómeno es cierto para ambos (aunque existen otras diferencias).

Answer 1

Si desea renderizar una malla de una geometry determinada, ahora puede usar este patrón:

var geo = new THREE.EdgesGeometry( geometry ); // or WireframeGeometry( geometry )
var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
var wireframe = new THREE.LineSegments( geo, mat );
scene.add( wireframe );

WireframeGeometry renderizará todos los bordes. EdgesGeometry renderizará los bordes duros.

Consulte también esta respuesta relacionada sobre cómo representar un modelo y su estructura alámbrica.

EDITAR: actualizado a three.js.r.82