Flip normals in three.js on sphere

flip, normals, three.js

Solution

This answer only applies to versions of three.js prior to r.125.

The Legacy `Geometry` class has been removed.

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.124

Problem

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 the normals so the sphere gets the sort of "hollow/carved effect" and then plater on apply my textures to the "inside" of the sphere. any ideas of how to flip the normals? Also.. if its not possible to do this in three.js.. would it be possible to import a model where the normals are already flipped and get the effect I'm looking for?

Original source