Three.js: Come sfogliare le normali dopo la scala negativa

Question

Ho clonato e poi capovolto un oggetto utilizzando la scala negativa, che causa l'inversione delle mie facce a faccia singola. La mia domanda è, come posso capovolgere anche le normali?

Non voglio usare material.side = THREE.DoubleSide, per ragioni: 1) non ha funzionato correttamente (alcune sfumature sono disegnate dall'interno) e 2) voglio mantenere più prestazioni possibili. Quindi DoubleSide non è un'opzione per me.

Ecco come il mio oggetto se capovolto.

mesh.scale.x = - scale_width; 

Grazie in anticipo!

Answer 1

Vorrei consigliare contro la scala negativa per tutta una serie di motivi, come spiegato in questo link: Transforming vertex normals in three.js

È possibile invece applicare un inversione di matrice per la geometria in questo modo

geometry.scale(- 1, 1, 1); 

Come spiegato in il collegamento, una conseguenza di ciò, tuttavia, è che le facce geometriche non avranno più ordine di avvolgimento in senso antiorario, ma in senso orario.

È possibile attraversare manualmente la geometria e capovolgere l'ordine di avvolgimento di ciascuna faccia. Questo potrebbe funzionare per te, se non hai applicato una texture e non stai usando UV. Se la tua geometria deve essere strutturata, anche gli UV dovranno essere corretti.

In realtà, un'utilità di inversione della geometria sarebbe una bella aggiunta a three.js. Attualmente, ciò che vuoi fare non è supportato dalla libreria.

Three.js r.72

Answer 2

Questa domanda è di due anni, ma nel caso qualcuno passa. Ecco un modo non distruttivo di fare questo:

È possibile accedere alla modalità "sporco vertici/normali", e capovolgere le normali manualmente:

mesh.geometry.dynamic = true 
mesh.geometry.__dirtyVertices = true; 
mesh.geometry.__dirtyNormals = true; 

mesh.flipSided = true; 

//flip every vertex normal in mesh by multiplying normal by -1 
for(var i = 0; i<mesh.geometry.faces.length; i++) { 
    mesh.geometry.faces[i].normal.x = -1*mesh.geometry.faces[i].normal.x; 
    mesh.geometry.faces[i].normal.y = -1*mesh.geometry.faces[i].normal.y; 
    mesh.geometry.faces[i].normal.z = -1*mesh.geometry.faces[i].normal.z; 
} 

mesh.geometry.computeVertexNormals(); 
mesh.geometry.computeFaceNormals(); 

+1 @WestLangley, vi consiglio di non usare mai scala negativa.