Typescript: FBXLoader not a constructor problem

loaders
typescript

#1

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:


#2

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?


#3

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:


#4

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


#5

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


#6

Here you go :smile:

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

https://pastebin.com/rUcx9TSq


#7

hi… cool… thx :wink:

i’ll check after lunch


#8

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…