My model exported from blender to three.js won't render correctly

Question

I'm trying to make a simple gear animation for my website using three.js. I created a gear mesh in Blender and a nice, shiny bronze material, and exported it to three.js json format with the blender exporter, using the below code.

var camera, scene, renderer, mesh, loader

init();

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;
    var ambientlight = new THREE.AmbientLight(0x404040); // soft white light 
    var pointlight = new THREE.PointLight(0xFFFFFF);
    pointlight.z = 5;
    scene.add(pointlight);
    scene.add(ambientlight);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    loader = new THREE.JSONLoader();
    loader.load("gear.js", function(geometry, materials) {
        mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
        scene.add(mesh);
        mesh.rotation.x += 1.5;
        animate()
    });
}
function animate() {
    requestAnimationFrame(animate);
    mesh.rotation.y += 0.02;
    mesh.rotation.x += 0.01;
    renderer.render(scene, camera);
}

Here is a screenshot of the mesh in Blender: \

And here is a screenshot of the three.js rendered content: Notice how only the back part of the gear is rendered. I have no idea why this is happening, if anyone could give me a pointer for my code I would be very grateful.

EDIT

User gaitat pointed out that it looks like it was rendered inside out. This is a much better description than "only the back part of the gear is rendered".

Answer 1

Your normals are backward (as others have pointed out).

Maybe you extruded backward to make the gear?

I'm not a blender expert but a quick google brings up a bunch of hits for flipping normals.