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

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

1 Like
3

I using this three-gltf-loader - npm
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.

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

16

Guys could you please share a github repo so I can see exactly how this was implemented?

17

You have to import the GLTFLoader from the JSM folder in three/examples/jsm/loaders/GLTFLoader.

import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

private gltfLoader: GLTFLoader

private loadGLTFModel(path: string) {

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

        this.scene.add(gltf.scene)

    }, 
    undefined, // Progress Event
    (error)=> {
        console.error('Error',error,error.message)
    })
}
1 Like
18

It does not wok with AMD/Require.js

19

@8Observer8 this thread is about ES Modules. If you need help with the older AMD/Require.js import system, I think you’ll need to create a new thread and provide details for reproducing the problem.

20

@donmccurdy Is AMD compilation old and Three.js does not support it?

1 Like