I’m using the following code to try and load an MTL and obj file - the index.html code is attached below. I made the file on blender. I also tried loading simpler files onto threejs and I still didn’t see anything on my browser. Not sure what I’m doing wrong.
three.js webgl - OBJLoader + MTLLoader
<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - OBJLoader + MTLLoader
</div>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
let camera, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 20 );
camera.position.z = 2.5;
// scene
scene = new THREE.Scene();
const ambientLight = new THREE.AmbientLight( 0xffffff );
scene.add( ambientLight );
const pointLight = new THREE.PointLight( 0xffffff, 15 );
camera.add( pointLight );
scene.add( camera );
// model
const onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
const percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
}
};
new MTLLoader()
.setPath( '/room' )
.load( 'roomnight.mtl', function ( materials ) {
materials.preload();
new OBJLoader()
.setMaterials( materials )
.setPath( '/room' )
.load( 'roomnight.obj', function ( object ) {
object.position.y = - 0.95;
object.scale.setScalar( 0.01 );
scene.add( object );
}, onProgress );
} );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
const controls = new OrbitControls( camera, renderer.domElement );
controls.minDistance = 2;
controls.maxDistance = 5;
//
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
</script>
</body>
I keep getting this message but nothing loads on my window:
“GET /” “Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36”
Would it be possible to share the OBJ and the MTL file? I’m just curious whether if I load them locally the model will show up.
PS. Sometimes models are not visible if they are too small, or too big, or too near, or too far, or behind the camera, or have the same color as the background, or the material/light conditions are not good, etc
Thank you so much!! I made those changes in my code. The only thing is I get this screen when I try to load it. Could you maybe let me know how you load it locally - I’m not sure if that’s where I’m messing up.
Remember that it is a digital star which costs nothing and is just a click away - it might just suggest to other people that there is something useful and FREE in my repository.
I don’t really aim for or expect to ever reach the number of stargazers that three.js repository has.
