This is my code ... and I searched a lot about it ... but I couldn't find where is the problem that nothing will show !! also there is not any errors ! I also can send you my files if u can help me ... thank you
<body>
<script src="Three.js"></script>
<script src="DDSLoader.js"></script>
<script src="MTLLoader.js"></script>
<script src="OBJLoader.js"></script>
<script>
// Setup a new scene
var scene = new THREE.Scene();
// Setup the camera
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 0;
camera.position.x = 0;
camera.position.y = 0;
// Setup the renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) { };
THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'obj/table/' );
mtlLoader.load( 'table.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'obj/table/' );
objLoader.load( 'table.obj', function ( object ) {
object.position.x = 0;
object.position.y = 0;
object.position.z = 0;
scene.add( object );
}, onProgress, onError );
});
// Render loop to rotate our sphere by a little bit each frame
var render = function () {
renderer.setClearColor( 0xa9db8b );
renderer.render(scene, camera);
};
render();
</script>
<canvas width="1366" height="662" style="width: 1366px; height: 662px;"></canvas>
</body>
As an option: you call render() before your model loaded.
Try this:
objLoader.load( 'table.obj', function ( object ) {
object.position.x = 0;
object.position.y = 0;
object.position.z = 0;
scene.add( object );
render(); // call it in the callback function
}, onProgress, onError );
});