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.
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.
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".
Solution
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.