It appears that some faces are missing from the obj file, resulting in improper rendering. The same object viewed in an online viewer shows all faces and parts rendered correctly. https://i.sstatic.net/tI3kb.jpg
Below is the image I am trying to render on localhost using THREE.js obj loader.
https://i.sstatic.net/nH0rA.jpg JavaScript file - main.js
window.onload=function(){
init();
animate();
}
function init() {
container = document.getElementById('container');
console.log(container)
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.x = 100;
...
// code continues
}
function animate() {
requestAnimationFrame(animate);
render();
controls.update();
}
function render() {
renderer.render(scene,camera);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - OBJ loader</title>
<meta charset="utf-8>"
<meta io ="view" name="viewport" content="width=device-width, height=device-height user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
...
</body>
</html>