Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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>

Issue Analytics

State:
Created 4 years ago
Comments:17 (1 by maintainers)

Top GitHub Comments

1reaction

msmcgilliscommented, Apr 24, 2019

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

0reactions

msmcgilliscommented, May 24, 2019

For my fork I created a 16311 branch and moved all my changes to it so it will be easier for me to keep my dev fork in sync with the three.js dev branch.

https://github.com/msmcgillis/three.js/tree/16311