I've been trying to display a 3D model with textures on my website using three.js to load .obj and .mtl files. However, for some reason, the model doesn't seem to be appearing. I even tried printing out the obj code itself and it seems fine. Can anyone help me figure out what might be causing this issue? Interestingly, there are no other errors showing up in the console either. The screen shows up with a black background but without the actual model visible. Any assistance would be greatly appreciated. Thank you!
let container, stats;
let camera, cameraTarget, scene, renderer;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 );
camera.position.set( 0, 0, 0 );
cameraTarget = new THREE.Vector3( 0, 0, 0 );
scene = new THREE.Scene();
var OBJFile = '/program fixture.obj';
var MTLFile = '/program fixture.mtl';
const manager = new THREE.LoadingManager();
manager.addHandler( /\.dds$/i, new DDSLoader() );
new MTLLoader(manager).load(MTLFile, function ( materials ) {
materials.preload();
new OBJLoader ( manager ).setMaterials( materials ).load(OBJFile, function ( object ) {
console.log(object);
scene.add( object );
});
});
camera.add( new THREE.PointLight( 0xffffff, 0.8 ) );
scene.add(camera);
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.shadowMap.enabled = true;
container.appendChild( renderer.domElement );
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.target.set(0, 1, 0)
// stats
stats = new Stats();
container.appendChild( stats.dom );
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
camera.lookAt( cameraTarget );
renderer.render( scene, camera );
}