Can't get GLTFExporter imported into an angular component

[andrewpap22]

Greetings,

Describing the bug

Thank you for this amazing library!

I got an angular project with the following information:

Angular CLI: 12.1.0
Node: 14.17.4
Package Manager: yarn 1.22.11
OS: linux x64

Angular: 12.1.3
... animations, common, compiler, core, forms, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.3
@angular-devkit/build-angular   12.1.3
@angular-devkit/core            12.1.0
@angular-devkit/schematics      12.1.0
@angular/cli                    12.1.0
@angular/compiler-cli           12.1.0
@schematics/angular             12.1.0
rxjs                            6.6.7
typescript                      4.3.5

THREE.REVISION 👉 "127"

What I'm trying to build is a .gltf exporter for a specific type of file, namely .root for the organization that I'm currently working.
You can find the repo over here 👉 link

Inside the file 👉 /LHCb_WebDisplay/src/app/gltf-exporter/gltf-exporter.component.ts
I've tried to import the GLTFExporter.js file with the following ways:

1. stackoverflow

// just for GLTFExporter
import * as THREE from 'three'
(<any>window).THREE = THREE;
import "three/examples/js/exporters/GLTFExporter";

/// on the method that I want to use it I implement the following
let options = {};
let exporter = new THREE.GLTFExporter();
exporter.parse(scene, (gltf) => {console.log("Parsed scene!"); }, options); 

The above should work based on this 👉 link

But it's not!

The error:

Error: export 'GLTFExporter' (imported as 'THREE') was not found in 'three'
Error: src/app/gltf-exporter/gltf-exporter.component.ts:106:30 - error TS2339: Property 'GLTFExporter' does not exist on type 'typeof
import("/LHCb_WebDisplay/node_modules/@types/three/index")'.
106 let exporter = new THREE.GLTFExporter();

2. Then I tried adding a script tag directly to the index.html file then I manually loaded the functions from the GLTFExporter.js to my component.ts based on this 👉 link

Even though with this method I didn't get compilation errors, I got runtime errors:

ERROR Error: Uncaught (in promise): ReferenceError: GLTFExporter is not defined

3. Then I tried the simpler way , which is similar to loading the GLTFLoader (which works by the way)

import * as THREE from 'three'
import { GLTFExporter } from 'three/examples/js/exporters/GLTFExporter'

let exporter = new GLTFExporter();
exporter.parse(scene, (gltf) => {console.log("Parsed scene!"); }, {});

/**
* Which again did not work,
* Even though doing the exactly same, but instead with GLTFLoader works...
*/

The error: (runtime again in the console, compilation is successful)

ERROR Error: Uncaught (in promise): TypeError:
three_examples_js_exporters_GLTFExporter__WEBPACK_IMPORTED_MODULE_1__.GLTFExporter is not a constructor

Keep in mind that I also got the following in my angular.json file

"scripts": [
  "node_modules/three/examples/js/exporters/GLTFExporter.js"
]

To Reproduce

Steps to reproduce the behavior:

1. Go to 👉 https://gitlab.cern.ch/anpappas/LHCb_WebDisplay
2. git clone
3. yarn install
4. yarn start
5. navigate to http://localhost:4200/
6. click the gltf exporter button
7. inside the codebase move to: /src/app/gltf-exporter/gltf-exporter.component.ts
8. try any of the above mentioned ways of importing GLTFExporter.js
9. ctrl + shift + i 👉 check the console

Live

The repo lives live over here if that helps any further ( but it shouldn't ) 👉 link

Expected behavior

Have the GLTFExporter imported? 😥

I'm not sure if this is a bug or my idiotness ( forgive me if it's the latter ) but I would appreciate some help here!

Thank you for your valuable time.

---

P.S. Forgot to mention that I have succeeded into creating what I want into the following repository 👉 repo

i.e. exporting my "special" .root file that describes a 3D geometry to .gltf with the GLTFExporter.js but as it is only a standalone html file with messy script tags and code inside I would like to properly merge it and refactor the code to a proper form into my angular application.

Thank you once again.

---

Platform:

• Device: [Desktop]
• OS: [Windows, MacOS, Linux]
• Browser: [Chrome, Firefox, Safari]
• Three.js version: [127]

[mrdoob]

TL;DR?

[WestLangley]

I'm not sure if this is a bug or my idiotness

Then please get help on the three.js forum first. Repost here if you can demonstrate a three.js bug.

Make sure all your files are from the same three.js version. And update to the latest release.