Typescript: FBXLoader not a constructor problem

ultra · August 8, 2018, 7:34am

hi,

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

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

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

calrk · August 8, 2018, 7:52am

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?

github.com

mrdoob/three.js/blob/master/examples/js/loaders/FBXLoader.js

/**
 * @author Kyle-Larson https://github.com/Kyle-Larson
 * @author Takahiro https://github.com/takahirox
 * @author Lewy Blue https://github.com/looeee
 *
 * Loader loads FBX file and generates Group representing FBX scene.
 * Requires FBX file to be >= 7.0 and in ASCII or >= 6400 in Binary format
 * Versions lower than this may load but will probably have errors
 *
 * Needs Support:
 *  Morph normals / blend shape normals
 *
 * FBX format references:
 * 	https://wiki.blender.org/index.php/User:Mont29/Foundation/FBX_File_Structure
 * 	http://help.autodesk.com/view/FBX/2017/ENU/?guid=__cpp_ref_index_html (C++ SDK reference)
 *
 * 	Binary format specification:
 *		https://code.blender.org/2013/08/fbx-binary-file-format-specification/
 */

This file has been truncated. show original

ultra · August 8, 2018, 4:08pm

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

looeee · August 8, 2018, 7:41pm

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

ultra · August 9, 2018, 6:59am

yeah for sure. if you are into the entire stuff

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

looeee · August 9, 2018, 9:46am

Here you go

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

ultra · August 9, 2018, 10:51am

hi… cool… thx

i’ll check after lunch

ultra · August 13, 2018, 9:10pm

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…

Dhawal_Gaur · November 9, 2018, 12:36am

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?

calrk · November 9, 2018, 2:19am

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.

Dhawal_Gaur · November 10, 2018, 11:08am

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

Sound_Safari · August 8, 2019, 12:53am

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.

Topic		Replies	Views
Why do I get the error - Uncaught TypeError: THREE.FBXLoader is not a constructor? Questions animation	8	1081	April 6, 2023
Latest FBXLoader giving a TypeError on loading a model Questions fbx-loader	6	872	November 8, 2018
Orbit Controls troubles with OBJ Loader in Angular 8 Questions loaders , angular	2	1873	July 25, 2020
Error importing FBX Questions fbx-loader	8	802	July 15, 2021
FBXLoader Import Failed Questions modules	2	437	April 21, 2022

Typescript: FBXLoader not a constructor problem

Caveats

Related topics