OBJLoader always return error

I’m trying to load a .obj file of a lot of differents ways but all of them fail. I have proved each example that i have found on the internet but any of them work for me.
I have proved with a lot of differents obj files too.

var material = new THREE.MeshBasicMaterial({ color: 0x444444 });
var loader = new THREE.OBJLoader();
	function (obj) {
		obj.traverse(function (child) {
			if (child instanceof THREE.Mesh) {
				child.material = material;
				obj.material = child.material;
				child.castShadow = true;
				child.receiveShadow = true;
	function (xhr) {
		console.log((xhr.loaded / xhr.total * 100) + "% loaded")
	function (err) {
		console.error("Error loading")

Always return “Error loading”.

I will appreciate any help. Thank you so much!


You can enhance the log for more details of the error console.error(“Error loading:”, err)

Thanks. I send a capture of console.error(“Error loading”, err). I can see more details, but i don’t understand them.


You can try to follow the code from the official example for OBJLoader in the part of onProgress: three.js/webgl_loader_obj.html at e62b253081438c030d6af1ee3c3346a89124f277 · mrdoob/three.js · GitHub

function (xhr) {
  if ( xhr.lengthComputable ) { // check this
    console.log((xhr.loaded / xhr.total * 100) + “% loaded”)

This line can be removed since OBJLoader always returns an instance of THREE.Group. And a group does not have a material property (since it is non-renderable 3D object used for grouping other 3D objects together).

1 Like

Thanks for helping me! Now I have tried this but it doesn’t work either:

let object;
function loadModel() {
    console.log("LOAD MODEL");
    object.traverse(function (child) {
        if (child.isMesh) child.material.map = texture;

const manager = new THREE.LoadingManager(loadModel);
manager.onProgress = function (item, loaded, total) {
    console.log("PROGRESS MANAGER");
    console.log(item, loaded, total);

// texture
const textureLoader = new THREE.TextureLoader(manager);
const texture = textureLoader.load('diceTextu.png');

// model
function onProgress(xhr) {
    if (xhr.lengthComputable) {
        const percentComplete = xhr.loaded / xhr.total * 100;
        console.log('model ' + Math.round(percentComplete, 2) + '% downloaded');

function onError(err) {
    console.log("error", err);

const loader = new THREE.OBJLoader(manager);

loader.load('diceLow.obj', function (obj) {
    console.log("LOAD", obj);
    object = obj;
}, onProgress, onError);

I found the solution, I need to test the web in a server, using xampp it works. In Glitch i need write the http files direction, no the local direction.