Importing THREE r102 examples/jsm/GLTFLoader into Angular 7 project

loaders

#1

Im trying to import the GLTFLoader into my existing angular project. I tried several plugins, i.e. thisplugin but none did work. I read and tested all stackoverflow threads i found… nothings works. Now updating my project to 102, i found the jsm folder in examples. Im including it like this:

import * as THREE from 'three'

import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader'

this.gltfLoader = new GLTFLoader(this.loadingManager)


 this.gltfLoader.load(path, (model)=> {

    this.models.push({
        path: path,
        model: model.scene,
        texturePath: texturePath
    })

    if(this.models.length > 1)
        this.models = Utility.removeDuplicates(this.models)

    let clone = model.scene.clone()

    onLoad(clone)

}, undefined, (error)=> {
    console.error('Error',error)
})

Throwing this Error when loading:

THREE is not defined

modelmanager.ts:164 Error ReferenceError: THREE is not defined at GLTFLoader.js:2715 at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:16963) at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138) at zone.js:872 at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:16954) at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)

What else can I provide? Please I really need to get this to work. This is frustrating me for days now. Thanks in advance


#2

Thanks for reporting! There is already a bug report at github for this issue:

BTW: I think you can delete your post at stackoverflow since there are still bugs in the converter that produces the modules.


#3

I using this https://www.npmjs.com/package/three-gltf-loader
import GLTFLoader from ‘three-gltf-loader’;


#4

Hey already tested it, but its also throwing an error saying GLTFLoader is not a constructor.
I also tried GLTF2Loader (three-gltf2-loader on npm) but basicly getting the same error


#5

Any progress on here?


#6

If your components isn’t library, try like this
image


#9

This should be fixed with the next release R103 :+1:. The JSM version of the dev branch should already be good to go.


#10

GLTFLoader r103 works fine! Thanks a lot for everything!


#11

Hi @Fluqz, I’m having the same issue where I can’t seem to access the GLTFLoader. I’m a bit confused what I’m supposed to do - I have my imports like so:

import * as THREE from 'three';
import 'three/examples/js/loaders/GLTFLoader';

But how do I actually access THREE.GLTFLoader?


#12

Import it like this

import { GLTFLoader } from 'three/examples/js/loaders/GLTFLoader'

You have to use it like so let gltfLoader = new GLTFLoader(). Remove the THREE.

Are you getting any errors?


#13

Okay, that makes sense! I was following the code block from doum. I see now - had to pull the updated version of the GLTFLoader and import directly.


#14

If you’re using typescript you need the modulized GLTFLoader from examples/jsm/GLTFLoader.js, which doesnt work in r102 yet. But there is a dev version for r103 which works. Just replace the code of the GLTFLoader.js with it.


#15

I don’t think this has something to do with TypeScript. You always have to use the GLTFLoader in the jsm directory if you want to import it as a module.