Using Three.js with Webpack 5 and FBXLoader inline integration

Question

Using Three.js with Webpack 5 and FBXLoader inline integration

I am currently working with Webpack 5 and attempting to provide a direct file path to my FBXLoader using the latest Webpack asset modules:

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

Despite managing to import and load the file successfully, I am facing a persistent issue where the file consistently shows up as a 404 error. This occurs when I pass the path in line with what is mentioned above.

In my Webpack 5 configuration, I have implemented the following rule:

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

javascript webpack three.js fbx webpack-5

Answer 1

Answer №1

To ensure that webpack includes your model, make sure to use an import statement in your JavaScript file pointing to it.

This is how my JavaScript code ended up looking like after including the model, and it loaded perfectly 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';  // Added this line

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

/* Additional setup code */

    const fbxLoader = new FBXLoader()
    fbxLoader.load(
        ringModel, // Using the model 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 */
}

Answer 2

To ensure that webpack includes your model, make sure to use an import statement in your JavaScript file pointing to it.

This is how my JavaScript code ended up looking like after including the model, and it loaded perfectly 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';  // Added this line

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

/* Additional setup code */

    const fbxLoader = new FBXLoader()
    fbxLoader.load(
        ringModel, // Using the model 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 */
}

Using Three.js with Webpack 5 and FBXLoader inline integration

Answer №1

Similar questions

Inconsistencies in Height Among JQuery Elements

Alternate the color over time using CSS

Changing the color of a div through animation

Bringing in Zip Folders

Locating the save directory with fileSystem API

Can the color of text be adjusted (to either white or black) based on the background color (in any color and format)?

How can I determine if a specific button has been clicked in a child window from a different domain?

Proportional fluid image grid with responsive design

ReactJS is facing a fatal error: CALL_AND_RETRY_LAST Allocation has failed due to JavaScript heap running out of memory

Tips for rearranging the order of x-editable events?

What steps can be taken to resolve the dependency problem with npm installation?

Is there a way to interact with specific locations on an image by clicking in JavaScript?

I'm looking to combine multiple RSS feeds into a single feed, then transform the combined feed into JSON data using JavaScript. How can I achieve this?

The three.js live server is displaying a blank white screen instead of the expected black background

Using an image instead of a checkbox when it is selected (Angular 4/Ionic 3)

Guide to Efficiently downloading a PDF file using Vue and Laravel

When employing TypeScript, an error pops up stating "cannot find name 'ObjectConstructor'" when attempting to use Object.assign

How to insert text into a text input using onKeyPress in react.js

Is it possible to utilize AngularJS' ng-view and routing alongside jade?

How to modify and remove a card element in semantic UI with react coding