<p dir="auto">Currently, <a href="https://github.com/mrdoob/three.js/blob/bda55a3bf0bc3f181b295a1c34997935f8ed7f1e/examples/js/loaders/GLTFLoader.js#L213">GLTFParser</a> and constants in <a href="https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/GLTFLoader.js">GLTFLoader</a> are scoped and cannot be used in user-land.<br>
However, sometimes it is needed.</p>
<p dir="auto">Usecases:</p>
<ul dir="auto">
<li>glTF-ish file may need special parsing using modified(extended) GLTFParser.</li>
<li>glTF models may be supplied in JSON or JSONP format from a WebApp API rather than files and need GLTFParser directly.</li>
</ul>
<p dir="auto">Also, <a href="https://github.com/mrdoob/three.js/blob/bda55a3bf0bc3f181b295a1c34997935f8ed7f1e/examples/js/loaders/GLTFLoader.js#L1088-L1195"><code class="notranslate">WEBGL_CONSTANTS</code> and other constants</a> would be useful if available under <code class="notranslate">THREE</code> or somewhere</p>
<p dir="auto">What I would like to have is:</p>
<ul dir="auto">
<li><code class="notranslate">THREE.GLTFParser</code></li>
</ul>
<p dir="auto">and maybe:</p>
<ul dir="auto">
<li><code class="notranslate">gltfLoaderInstance.gltfParser</code></li>
<li><code class="notranslate">THREE.WEBGL_CONSTANTS.FLOAT = 5126</code> and so on</li>
</ul>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">If you have multiple threejs objects on a page that each use LoadingManager only one of the objects will fire the LoadManager onLoad call back.</p>
<p dir="auto">The problem is in the FileLoader in its load call. In the broken case all we do in the FileLoader load is:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="if ( loading[ url ] !== undefined ) {

			loading[ url ].push( {

				onLoad: onLoad,
				onProgress: onProgress,
				onError: onError

			} );

			return;

		}"><pre class="notranslate"><code class="notranslate">if ( loading[ url ] !== undefined ) {

			loading[ url ].push( {

				onLoad: onLoad,
				onProgress: onProgress,
				onError: onError

			} );

			return;

		}
</code></pre></div>
<p dir="auto">The above code causes a return without ever telling the different manager itemStart. Not exactly sure how you want to fix but the above needs to identify if different load requests come from different managers and if it is the first time for a particular manager trigger its itemStart then when the file is done we also need to trigger all the different managers itemEnd.</p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r103</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ...</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS</li>
</ul>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>
<h2 dir="auto">example html to reproduce problem</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;html&gt;
&lt;head&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.js&quot;&gt;&lt;/script&gt;
&lt;style&gt;
#test1 {
  width: 200px;
  height: 200px;
}
#test2 {
  width: 200px;
  height: 200px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id=&quot;test1&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;test2&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;script&gt;
class word {
  constructor(target) {
    this.scene  = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera( 75,
                  target.offsetWidth/target.offsetHeight, 0.1, 1000 );
    this.camera.position.z = 100;
    this.renderer = new THREE.WebGLRenderer({antialias:true});
    this.renderer.setSize( target.offsetWidth, target.offsetHeight );
    target.appendChild( this.renderer.domElement );

    this.scene.background = new THREE.Color(0xFFFFFF);
    var light = new THREE.AmbientLight(0xFFFFFF);
    this.scene.add(light);

    var manager = new THREE.LoadingManager();
    manager.onLoad = this.draw.bind(this);
    new THREE.FontLoader(manager).load(&quot;https://threejs.org/examples/fonts/optimer_bold.typeface.json&quot;,this.savefont.bind(this));
  }

  savefont(font) {
    this.font = font;
  }

  draw() {
    var geometry = new THREE.TextGeometry(&quot;Test&quot;,{
      font: this.font,
      size: 50,
      height: 1,
      curveSegments: 4
    });
    geometry.center();
    var material = new THREE.MeshLambertMaterial( { color: 0x0000EE } );
    var word = new THREE.Mesh( geometry, material );
    this.scene.add( word );
    this.render();
  }

  render() {
    requestAnimationFrame( this.render.bind(this) );
    this.renderer.render(this.scene,this.camera);
  }
}
new word(document.getElementById(&quot;test1&quot;));
new word(document.getElementById(&quot;test2&quot;));
&lt;/script&gt;
&lt;/html&gt;"><pre class="notranslate"><code class="notranslate">&lt;html&gt;
&lt;head&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.js"&gt;&lt;/script&gt;
&lt;style&gt;
#test1 {
  width: 200px;
  height: 200px;
}
#test2 {
  width: 200px;
  height: 200px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id="test1"&gt;&lt;/div&gt;
  &lt;div id="test2"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;script&gt;
class word {
  constructor(target) {
    this.scene  = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera( 75,
                  target.offsetWidth/target.offsetHeight, 0.1, 1000 );
    this.camera.position.z = 100;
    this.renderer = new THREE.WebGLRenderer({antialias:true});
    this.renderer.setSize( target.offsetWidth, target.offsetHeight );
    target.appendChild( this.renderer.domElement );

    this.scene.background = new THREE.Color(0xFFFFFF);
    var light = new THREE.AmbientLight(0xFFFFFF);
    this.scene.add(light);

    var manager = new THREE.LoadingManager();
    manager.onLoad = this.draw.bind(this);
    new THREE.FontLoader(manager).load("https://threejs.org/examples/fonts/optimer_bold.typeface.json",this.savefont.bind(this));
  }

  savefont(font) {
    this.font = font;
  }

  draw() {
    var geometry = new THREE.TextGeometry("Test",{
      font: this.font,
      size: 50,
      height: 1,
      curveSegments: 4
    });
    geometry.center();
    var material = new THREE.MeshLambertMaterial( { color: 0x0000EE } );
    var word = new THREE.Mesh( geometry, material );
    this.scene.add( word );
    this.render();
  }

  render() {
    requestAnimationFrame( this.render.bind(this) );
    this.renderer.render(this.scene,this.camera);
  }
}
new word(document.getElementById("test1"));
new word(document.getElementById("test2"));
&lt;/script&gt;
&lt;/html&gt;
</code></pre></div>