three.js: LoadingManger (in multi instance case) fails to fire onLoad.

Description of the problem

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.

The problem is in the FileLoader in its load call. In the broken case all we do in the FileLoader load is:

if ( loading[ url ] !== undefined ) {

			loading[ url ].push( {

				onLoad: onLoad,
				onProgress: onProgress,
				onError: onError

			} );

			return;

		}

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.

Three.js version
  • Dev
  • r103
  • …
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

example html to reproduce problem

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.js"></script>
<style>
#test1 {
  width: 200px;
  height: 200px;
}
#test2 {
  width: 200px;
  height: 200px;
}
</style>
</head>
<body>
  <div id="test1"></div>
  <div id="test2"></div>
</body>
<script>
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"));
</script>
</html>

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 17 (1 by maintainers)

Commits related to this issue

Most upvoted comments

I will take a closer look and see what I come up with.

+1
msmcgillis on Apr 24, 2019
Read more comments on GitHub
← three.js: Loaders: Inconsistent implementations of .setPath()
three.js: matrix.extractRotation() returns incorrect rotation matrix when scale is negative →