Flip normals in three.js on sphere

Question

I have been searching around and haven\'t found any really good answer to my question yet.. The thing is that I have this sphere.. just a basic sphere, and I want to flip th

Answer 1

When you are creating material for your sphere, specify {side:THREE.DoubleSide}. This will make faces visible from both sides.

You can also change it anytime after your material is created.

Answer 2

You can flip the normals in your geometry by reversing the winding order of your faces. You then have to fix UVs.

for ( var i = 0; i < geometry.faces.length; i ++ ) {

    var face = geometry.faces[ i ];
    var temp = face.a;
    face.a = face.c;
    face.c = temp;

}

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

var faceVertexUvs = geometry.faceVertexUvs[ 0 ];
for ( var i = 0; i < faceVertexUvs.length; i ++ ) {

    var temp = faceVertexUvs[ i ][ 0 ];
    faceVertexUvs[ i ][ 0 ] = faceVertexUvs[ i ][ 2 ];
    faceVertexUvs[ i ][ 2 ] = temp;

}

However, you can get the same effect by simply setting Material.side = THREE.BackSide, or Material.side = THREE.DoubleSide.

In either case, your texture will be rendered flipped. You can either flip your texture before-hand, or build a model outside of three.js and import it.

three.js r.65

Answer 3

Another way is to simply flip the normals manually by making your object's geometry dynamic.

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();

Answer 4

It is fixed !!

The flip of an object with a negative scale object.scale.x = -1 also reverse the normals since three.js r89 (see: Support reflection matrices. #12787).

(But I have to upgrade to r91 to solve my normal issue.)