[SOLVED] OBJLoader not displaying anything

OBJLoader not displaying anything

I'm trying three js with OBJ files, but it does not get rendered on the screen, can someone please help me with this issue? is there something obvious I'm missing?

On the other hand, a geometric cube renders perfectly.

OBJ file can be downloaded here: https://free3d.com/pt/3d-model/tote-bag-womens-v1--846558.html

index.js:

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import sacola from './sacola.obj';

const renderer = new THREE.WebGLRenderer();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const controls = new OrbitControls( camera, renderer.domElement );
const loader = new OBJLoader();
const scene = new THREE.Scene();
const axesHelper = new THREE.AxesHelper(5)


scene.add(axesHelper)
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor('#000', 0)
camera.position.set(0,0,8);
controls.enableDamping = true
document.body.appendChild( renderer.domElement );


// const geometry = new THREE.BoxGeometry( 1, 1, 1 );
// const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// const cube = new THREE.Mesh( geometry, material );
// scene.add( cube );

loader.load(sacola, (model) => {
        model.position.set(0, 0, -53);
        scene.add( model )
    },
);

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
    controls.update();
}
animate()

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apresentação 3D</title>
</head>
<body>
</body>
</html>

webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        assetModuleFilename: 'assets/[hash][ext][query]',
    },
    devServer: {
        port: 3001,
        open: true,
        allowedHosts: 'all'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|jpeg|gif|obj)$/i,
                type: 'asset/resource'
            },
            {
                test: /\.obj$/,
                loader: 'webpack-obj-loader'
            }
        ]
    },
    plugins: [ 
            new HtmlWebpackPlugin({ template: './src/public/index.html', inject: true })
    ],
}

Code structure:

Solution

Update:

The problem was my OBJ loader inside webpack, for some reason using

 {
   test: /\.obj$/,
   loader: 'webpack-obj-loader'
 }

made so my code did not work.

removing it solved my problem