Typescript: FBXLoader not a constructor problem

hi,

first of all… i’m new to threejs and typescript so it’s maybe a dump question… :wink:

versions i use:
“three”: “^0.95.0”,
@angular/*”: “^6.1.0”,

the stuff was installed with npm install…

my dev environment is:
vscode (newest version)
chrome (newest version)

what i want to do:
i’m using angular to create a webpage. means typescript.
threejs itself works. i have a rotating cube which is shown and rotating nicely :wink:

next step is to load a fbx. and here i’m having a problem.

what i do in my ts-source is:

import * as THREE from ‘three’;
/…/
later i try to create a FBXLoader instance.

var loader:THREE.FBXLoader;
loader = new THREE.FBXLoader();

compiling is nice. but if i show the page in the browser i get following error:

the problem
AppComponent.html:14 ERROR TypeError: three__WEBPACK_IMPORTED_MODULE_1__.FBXLoader is not a constructor
at PanoramaEquirectangularComponent.push…/src/app/panorama-equirectangular/panorama-equirectangular.component.ts.PanoramaEquirectangularComponent.createFbx (panorama-equirectangular.component.ts:134)
at PanoramaEquirectangularComponent.push…/src/app/panorama-equirectangular/panorama-equirectangular.component.ts.PanoramaEquirectangularComponent.ngAfterViewInit (panorama-equirectangular.component.ts:342)
at callProviderLifecycles (core.js:9568)
at callElementProvidersLifecycles (core.js:9542)
at callLifecycleHooksChildrenFirst (core.js:9532)
at checkAndUpdateView (core.js:10468)
at callViewAction (core.js:10700)
at execComponentViewsAction (core.js:10642)
at checkAndUpdateView (core.js:10465)
at callWithDebugContext (core.js:11352)

/…/

this i can’t get currently. why is not a constructor? i searched the net found explanations what “not a constructor” means
like
var blubb: string;
var bla = new blubb();
should produce the problem if i remember me right. but i don’t see why this appears here?
unforunately i could not find the excat problem on the net.

the FBXLoader is shown in vscode via tooltip (ctrl and mouse over FBXLoader) which looks ok. also a constructor.

anyone could give me an advice how to solve?

thanks alot
ultra :wink:

Try and log it and see what the result is
console.log(THREE.FBXLoader);

I believe that you will find it is undefined as it is not a core part of the ThreeJS library. You will need to import and include the loader (and any other dependencies of the fbx loader, such as DDSLoader if using .dds)

Many of the loaders need to be included this way. It is strange that VSCode shows that it does exist, maybe it is autofilled by a linter which doesn’t take this into account?

1 Like

thx for your answer.

tried alot now… and got it to run a bit … there is another module named fbx-loader which i can use to load the fbx but the animation doesn’t work (fbx is the samba fbx from the examples)…meh… i guess it’s because an old fbx loader…
so better to use the fbx-loader which is included in the current three version.

it seems it is because i’m working with modules and typescript (or so). i found an url with an msg about that on the threejs site.
https://threejs.org/docs/#manual/introduction/Import-via-modules
it says at the end:

Caveats

Currently it’s not possible to import the files within the “examples/js” directory in this way. This is due to some of the files relying on global namespace pollution of THREE. For more information see Transform examples/js to support modules #9562.

let’s see maybe it’s not to heavy to convert it…
anyway thx for reading :wink:

The latest version of the FBXLoader is very easy to convert, you just need to change four or five lines.

yeah for sure. if you are into the entire stuff :wink:

i already started to convert it to typescript… already invested almost 2 days for this. just to convert it to minimal typescript is faster done …problem is i’m no expert for modules…

had the same with the projector which took me also 2 days. converting it was a question of maybe an hour… or so…

ok the fbxloader is a bit bigger. but does not use that much variables in the class… anyway

Here you go :smile:

It’s a version from last week so pretty up to date.

hi… cool… thx :wink:

i’ll check after lunch

finally it works… unforunately it took me quite a while to get this to run…

after including your source in typescript i had the same problem not a construction when newing the FBXLoader…
after endless tests i just converted the FBXLoader to a class and this worked fine… well i’m no expert here looks like the old write style isn’t accepted somehow,…anyway

thx great… unfortunately i ran into the next problem… but i’ll open up a new thread maybe someone has an idea…

Hi
I am working on an angular project where I am trying to load fbx file using a fbxloader from three-full node module. I have included the required inflate.min.js but it gives the following Type Error:

TypeError: child.material.clone is not a function
at Three.es.js:60764
at Mesh.traverse (Three.es.js:3918)
at Group.traverse (Three.es.js:3924)
at FBXTreeParser.setupMorphMaterials (Three.es.js:60742)
at FBXTreeParser.parseScene (Three.es.js:60174)
at FBXTreeParser.parse (Three.es.js:59479)
at FBXLoader.parse (Three.es.js:59452)
at Object.onLoad (Three.es.js:59398)
at XMLHttpRequest. (Three.es.js:21917)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)

Any idea about this? What am I doing wrong?

Are you able to share your model for testing? seems like it might be using an unusual material type, might need to file a bug on the github repo if so.

no the model is fine it gets loaded when using script tags to import libraries
Yes I reported an Issue in the repo three-full

I figured this out. You need to use the loader in the appropriate example/jsm location. See docs for why: https://threejs.org/docs/#manual/en/introduction/Import-via-modules. It includes the typescript files needed

In angular with typescript it works like this:

import {FBXLoader} from 'three/examples/jsm/loaders/FBXLoader'
...
var loader= new FBXLoader();
      loader.load("./assets/3D/paladin head.fbx", (model)=> {
      console.log("MODEL",model)
}, undefined, (error)=> {
   console.error('Error',error)
}) ;

Change “./assets/3D/paladin head.fbx” to your asset of course for this particular example.

1 Like