Reputation: 183
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".
Upvotes: 1
Views: 660
Reputation:
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.
Upvotes: 2