JSM / GLTFLoader: Webpack error using jsm

Description of the problem

I´m using three.js in an Angular project with webpack as bundler.
When trying to load a GLTF file a ReferenceError is thrown:

ERROR Error: Uncaught (in promise): ReferenceError: THREE is not defined ReferenceError: THREE is not defined at GLTFLoader.js:2715

Referring to this line of code:

} else if ( geometries.length > 1 && THREE.BufferGeometryUtils !== undefined ) {

In my TypeScript code, I import the loader this way:

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

I guess to fix this, either BufferGeometryUtils hast to be exported in three.module.js or the code block has to be removed from the jsm version of GLTFLoader, as the global THREE object is not defined.

I also found that BufferGeometryUtils is an exception in the modularize script:

{ path: ‘loaders/GLTFLoader.js’, ignoreList: [ ‘NoSide’, ‘Matrix2’, ‘DDSLoader’, ‘DRACOLoader’, ‘BufferGeometryUtils’ ] },
Three.js version
  • Dev
  • [x ] r102
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

Author: Fantashit

2 thoughts on “JSM / GLTFLoader: Webpack error using jsm

  1. Unfortunately the examples/jsm modules aren’t fully functional yet sorry. Still working on this.

  2. I´ve tryed the updated GLTFLoader in dev branch and it´s working fine, waiting for the release.
    Thanks for the fix!

    For anyone that needs an urgent fix, use the ‘three-gltf-loader’ npm package:

    import GLTFLoader from 'three-gltf-loader';

Comments are closed.