I am having issues importing an FBX model using FBXLoader in three.js, please help

Questions
, ,
1

I used npm to download the node_modules of three.js and I am referencing the folders I want to use in my HTML file like this -

    <script src="node_modules\three\build\three.min.js"></script>

    <script src="node_modules\three\build\three.cjs"></script>

    <script src="node_modules\three\build\three.module.js"></script>

    <script src= "node_modules\three\examples\js\loaders\GLTFLoader.js"></script>

    <script src = "node_modules\three\examples\js\controls\OrbitControls.js" > </script>

    <script src = "node_modules\three\examples\jsm\loaders\FBXLoader.js"> </script>

In my javascript file, I am trying to load a model I downloaded from Mixamo like this

let FBX_Loader = new THREE.FBXLoader();

        FBX_Loader.load('test.fbx', function(model){

            model.position.y =  0; 

            model.position.x = 0; 

             model.position.z = 2.8; 
             model.scale.set(300,300,300);
            scene.add(model);
          animate();
        });

This is not working for me. My GLTF.Loader works fine in loading my models in my Javascript file.
It’s just the FBX loader that isn’t working and I am not sure why that is the case. I tried decreasing or increasing the scale or changing the position values but that didn’t work. Could it be that I am referencing the wrong folder for the FBX loader? Could somebody here be able to give me directions on what else I can do to troubleshoot? Thanks!

2

I use threeJS in a web browser and it appears the file structure is the same. You’re expecting FBXLoader() to be on the THREE object. If that were the case, you wouldn’t need to import the FBXLoader.js file.

Try instantiating FBX_Loader like this:
let FBX_Loader = FBXLoader();

3

you load three separate threejs, and then mix js and jsm. node_modules are for bundlers, vite, parcel, webpack etc, to put this into a script tag is wrong, node is a local dev environment, do you really plan to upload it onto the server entirely? better go through this document three.js docs

4

@reaton33 I tried that but it still didn’t work. For the time being, I was able to find a workaround by changing the FBX model into a GLTF using Blender.

5

@drcmda I had followed the instructions and when I tried

import * as THREE from ‘three’;

And tried adding scenes and meshes, it didn’t work.

That was why I added the links. What do you believe might be the issue?

I see the node file like this(Attached screenshot) inside my project folder

image

I am also trying to use other files besides the loaders and I am forced to add the links to all the files…

I am using VScode as an IDE and Live Share plugin to run my work.