Don't initialize text mesh until the font has loaded. This prevents the raycaster to intersect prematurely (fix #4742)

Author: dmarcos

src/components/text.js

@@ -91,14 +91,11 @@ module.exports.Component = registerComponent('text', {
     this.shaderData = {};
     this.geometry = createTextGeometry();
     this.createOrUpdateMaterial();
-    this.mesh = new THREE.Mesh(this.geometry, this.material);
-    this.el.setObject3D(this.attrName, this.mesh);
   },
 
   update: function (oldData) {
     var data = this.data;
     var font = this.currentFont;
-
     if (textures[data.font]) {
       this.texture = textures[data.font];
     } else {
@@ -134,9 +131,7 @@ module.exports.Component = registerComponent('text', {
     this.material = null;
     this.texture.dispose();
     this.texture = null;
-    if (this.shaderObject) {
-      delete this.shaderObject;
-    }
+    if (this.shaderObject) { delete this.shaderObject; }
   },
 
   /**
@@ -201,7 +196,7 @@ module.exports.Component = registerComponent('text', {
     if (!data.font) { warn('No font specified. Using the default font.'); }
 
     // Make invisible during font swap.
-    this.mesh.visible = false;
+    if (this.mesh) { this.mesh.visible = false; }
 
     // Look up font URL to use, and perform cached load.
     fontSrc = this.lookupFont(data.font || DEFAULT_FONT) || data.font;
@@ -217,14 +212,7 @@ module.exports.Component = registerComponent('text', {
       if (!fontWidthFactors[fontSrc]) {
         font.widthFactor = fontWidthFactors[font] = computeFontWidthFactor(font);
       }
-
-      // Update geometry given font metrics.
-      self.updateGeometry(geometry, font);
-
-      // Set font and update layout.
       self.currentFont = font;
-      self.updateLayout();
-
       // Look up font image URL to use, and perform cached load.
       fontImgSrc = self.getFontImageSrc();
       cache.get(fontImgSrc, function () {
@@ -236,6 +224,11 @@ module.exports.Component = registerComponent('text', {
         texture.needsUpdate = true;
         textures[data.font] = texture;
         self.texture = texture;
+        self.initMesh();
+        self.currentFont = font;
+        // Update geometry given font metrics.
+        self.updateGeometry(geometry, font);
+        self.updateLayout();
         self.mesh.visible = true;
         el.emit('textfontset', {font: data.font, fontObj: font});
       }).catch(function (err) {
@@ -248,6 +241,12 @@ module.exports.Component = registerComponent('text', {
     });
   },
 
+  initMesh: function () {
+    if (this.mesh) { return; }
+    this.mesh = new THREE.Mesh(this.geometry, this.material);
+    this.el.setObject3D(this.attrName, this.mesh);
+  },
+
   getFontImageSrc: function () {
     if (this.data.fontImage) { return this.data.fontImage; }
     var fontSrc = this.lookupFont(this.data.font || DEFAULT_FONT) || this.data.font;
@@ -279,7 +278,7 @@ module.exports.Component = registerComponent('text', {
     var x;
     var y;
 
-    if (!geometry.layout) { return; }
+    if (!mesh || !geometry.layout) { return; }
 
     // Determine width to use (defined width, geometry's width, or default width).
     geometryComponent = el.getAttribute('geometry');

tests/components/text.test.js

@@ -37,14 +37,21 @@ suite('text', function () {
   });
 
   suite('multiple', function () {
-    test('can have multiple instances', () => {
+    test('can have multiple instances', (done) => {
       el.setAttribute('text__foo', {value: 'foo'});
-      el.setAttribute('text__bar', {value: 'bar'});
-      el.setAttribute('text__baz', {value: 'baz'});
-      assert.ok(el.getObject3D('text') instanceof THREE.Mesh);
-      assert.ok(el.getObject3D('text__foo') instanceof THREE.Mesh);
-      assert.ok(el.getObject3D('text__bar') instanceof THREE.Mesh);
-      assert.ok(el.getObject3D('text__baz') instanceof THREE.Mesh);
+      el.addEventListener('textfontset', evt => {
+        assert.ok(el.getObject3D('text') instanceof THREE.Mesh);
+        assert.ok(el.getObject3D('text__foo') instanceof THREE.Mesh);
+        el.setAttribute('text__bar', {value: 'foo'});
+        el.addEventListener('textfontset', evt => {
+          assert.ok(el.getObject3D('text__bar') instanceof THREE.Mesh);
+          el.setAttribute('text__baz', {value: 'baz'});
+          el.addEventListener('textfontset', evt => {
+            assert.ok(el.getObject3D('text__baz') instanceof THREE.Mesh);
+            done();
+          });
+        });
+      });
     });
   });