Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't get GLTFExporter imported into an angular component #22323

Closed
andrewpap22 opened this issue Aug 13, 2021 · 2 comments
Closed

Can't get GLTFExporter imported into an angular component #22323

andrewpap22 opened this issue Aug 13, 2021 · 2 comments

Comments

@andrewpap22
Copy link

andrewpap22 commented Aug 13, 2021

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();

  1. 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

  1. 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
Copy link
Owner

mrdoob commented Aug 13, 2021

TL;DR?

@WestLangley
Copy link
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants