I have .obj model, than i made (found) in c4d and exported it with scale 1 in meters. Than i try to load it in Three.js with OBJLoader, no errors, but model not showing. What's the problem with this
<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<body style="margin:0;padding:0;">
</body>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 2000);
var render = new THREE.WebGLRenderer();
camera.position.set(0, 0, 53);
render.setSize(innerWidth, innerHeight);
document.body.appendChild(canvas = render.domElement);
render.setClearColor(0x111111, 1);
function loadScene() {
var loader = new THREE.OBJLoader();
loader.load("./fox.obj", function(model) {
model.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.color = 0xffb830;
}
});
model.position.set(0, 0, -53);
scene.add(model);
window.model = model;
});
render.render(scene, camera);
}
window.onload = loadScene;
</script>
I made it work by: (simpler correction below, in UPDATE)
1 - Removing this line:
render.render(scene, camera);
2 - Adding this piece of code after the initializations:
function animate() {
requestAnimationFrame( animate );
render.render( scene, camera );
}
animate();
3 - Also by using a different source for the three.js library. I included the local copy I'm currently using in another project, and it worked. Probably you're fetching it from an out-of-date source... Try to download the file directly from the download link: https://github.com/mrdoob/three.js/archive/master.zip
You should also try to add OrbitControls to the scene so that you can orbit/navigate by the scene, because the object could be bigger than you expect and not showing (apparently) because of that. You can add orbit controls by including the OrbitControls.js available in the three.js source, and adding the following line to your code:
var controls = new THREE.OrbitControls( camera, render.domElement );
UPDATE:
Just call the render inside the function of the load method, like ManoDestra suggested:
loader.load("./fox.obj", function(model) {
model.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.color = 0xffb830;
}
});
model.position.set(0, 0, -53);
scene.add(model);
window.model = model;
render.render(scene, camera);
});