Three.js - Webpack 5 and FBXLoader inline

Question

I'm using Webpack 5 and I'm trying to give a file path directly to my FBXLoader by using the new Webpack asset modules:

const loader = new FBXLoader()
loader.load('../assets/models/myModel.fbx', (object) => { ... }) // error 404 not found

But the file is always 404 not found. I managed to import the file and load it but when I pass the path inline as above it's not working.

My Webpack 5 config is using this rule:

// Fbx - only resolves import myFile from '../assets/models/myModel.fbx'
{
  test: /\.fbx/,
  type: 'asset/resource',
},

score 0 · Answer 1 · answered Nov 07 '22 at 05:26

Using an import pointing to your model in your JavaScript will ensure webpack includes it.

My JavaScript ended up looking like this, and loads the model just fine.

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import Stats from 'three/examples/jsm/libs/stats.module'
import ringModel from './models/ring.fbx';  // Add this

export default function ringMe() {
    const scene = new THREE.Scene();
    scene.add(new THREE.AxesHelper(5));

/* More setup code */

    const fbxLoader = new FBXLoader()
    fbxLoader.load(
        ringModel, // Use it here
        (object) => {
            object.scale.set(.1, .1, .1)
            scene.add(object)
        },
        (xhr) => { console.log((xhr.loaded / xhr.total) * 100 + '% loaded') },
        (error) => { console.log(error) }
    );

/* Render function, etc */

}

Three.js - Webpack 5 and FBXLoader inline

1 Answers1