Currently, I am attempting to create a basic gear animation for my website using three.js. Initially, I crafted a gear mesh in Blender with a splendid, shiny bronze material, and exported it to three.js json format using the blender exporter and the code provided below.
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);
}
Displayed below is a screenshot of the gear mesh in Blender:
Moreover, here is an image of the three.js rendered content: Remarkably, only the back part of the gear is being rendered. I am at a loss as to why this is occurring, and any guidance on my code would be greatly appreciated.
UPDATE
User gaitat mentioned that it seems like the gear was rendered inside out, which provides a more accurate description than "only the back part of the gear is rendered".