TypeError: url.match is not a function on WHS.Text

[tomriddle1234]

Using Text in whs 2.1.2 gives Run Time Error. Require clearer example on using Text function, better to add some UTF8 character example, other than just English font.

Code:

const text = new WHS.Text({
    geometry: {
      text: 'hello world',
      parameters: {
        font:'gentilis_bold.typeface.js',
        size: 20,
        height: 5,
        curveSegments: 6
      }
    },

    material: new THREE.MeshBasicMaterial({
      color: 0xffffff
    }),

    position: {
      x: -40,
      y: 20,
      z: 0
    }
  });
  text.addTo(app);

no matter where to put the gentilis_bold.typeface.js file, the above code always gives run time error,

Uncaught (in promise):TypeError: url.match is not a function load @.../vendor.js ...

Stack trace to polyfile.js, something like:
http://localhost:8102/build/polyfill.js:3:13190

Environment:

Ionic 3.5.0
Angular 4.1.3
Node 7.1.0

Version:

• v2.x.x
• v1.x.x

Issue type:

• Bug
• Proposal/Enhancement
• Question
• Discussion

---

Tested on:

Desktop

• Chrome
• Chrome Canary
• Chrome dev-channel
• Firefox
• Opera
• Microsoft IE
• Microsoft Edge

[sasha240100]

@tomriddle1234 hey, yep. I need to update docs. See the Text defaults changed.
Will update the docs soon. Thanks for reminder!

[tomriddle1234]

@sasha240100 thanks, 👍

[tomriddle1234]

const text = new WHS.Text({
    geometry: {
      text: 'hello world',
      loader: new THREE.FontLoader(),
      parameters: {
        size: 12,
        height: 50,
        curveSegments: 12,
        font: new THREE.Font(),
        bevelEnabled: false,
        bevelThickness: 10,
        bevelSize: 8
      }
    },

    material: new THREE.MeshBasicMaterial({
      color: 0xffffff
    }),

    position: {
      x: -40,
      y: 20,
      z: 0
    }
  });
  text.addTo(app);

However this is still not working, could you plz tell what's wrong?

Runtime error: 
ERROR Error: Uncaught (in promise): TypeError: url.match is not a function
load@http://localhost:8101/build/vendor.js:111631:28
load@http://localhost:8101/build/vendor.js:117937:3
build/promise<@http://localhost:8101/build/vendor.js:159094:9
t@http://localhost:8101/build/polyfills.js:3:14699
build@http://localhost:8101/build/vendor.js:159093:21
MeshComponent@http://localhost:8101/build/vendor.js:155639:19
Text@http://localhost:8101/build/vendor.js:159046:50
HomePage@http://localhost:8101/build/main.js:94:20
createClass@http://localhost:8101/build/vendor.js:11251:26
createDirectiveInstance@http://localhost:8101/build/vendor.js:11082:37
createViewNodes@http://localhost:8101/build/vendor.js:12445:49
createRootView@http://localhost:8101/build/vendor.js:12350:5
callWithDebugContext@http://localhost:8101/build/vendor.js:13565:39
debugCreateRootView@http://localhost:8101/build/vendor.js:13025:12
ComponentFactory_.prototype.create@http://localhost:8101/build/vendor.js:10271:37
ComponentFactoryBoundToModule.prototype.create@http://localhost:8101/build/vendor.js:3807:16
NavControllerBase.prototype._viewInit@http://localhost:8101/build/vendor.js:33487:27
NavControllerBase.prototype._nextTrns/<@http://localhost:8101/build/vendor.js:33279:17
f</t.prototype.invoke@http://localhost:8101/build/polyfills.js:3:8969
onInvoke@http://localhost:8101/build/vendor.js:4508:28
f</t.prototype.invoke@http://localhost:8101/build/polyfills.js:3:8896
c</r.prototype.run@http://localhost:8101/build/polyfills.js:3:4121
f/<@http://localhost:8101/build/polyfills.js:3:13729
f</t.prototype.invokeTask@http://localhost:8101/build/polyfills.js:3:9644
onInvokeTask@http://localhost:8101/build/vendor.js:4499:28
f</t.prototype.invokeTask@http://localhost:8101/build/polyfills.js:3:9557
c</r.prototype.runTask@http://localhost:8101/build/polyfills.js:3:4812
o@http://localhost:8101/build/polyfills.js:3:1884

Stack trace:
c@http://localhost:8101/build/polyfills.js:3:13190
u/<@http://localhost:8101/build/polyfills.js:3:12546
f</t.prototype.invoke@http://localhost:8101/build/polyfills.js:3:8969
onInvoke@http://localhost:8101/build/vendor.js:4508:28
f</t.prototype.invoke@http://localhost:8101/build/polyfills.js:3:8896
c</r.prototype.run@http://localhost:8101/build/polyfills.js:3:4121
f/<@http://localhost:8101/build/polyfills.js:3:13729
f</t.prototype.invokeTask@http://localhost:8101/build/polyfills.js:3:9644
onInvokeTask@http://localhost:8101/build/vendor.js:4499:28
f</t.prototype.invokeTask@http://localhost:8101/build/polyfills.js:3:9557
c</r.prototype.runTask@http://localhost:8101/build/polyfills.js:3:4812
o@http://localhost:8101/build/polyfills.js:3:1884

[sasha240100]

@tomriddle1234 I guess documentation for Text is completely wrong now. I found some typos.
I looked through the code again and found some things:

1. parameters.font should be a string (url path to the font you use)
2. {geometry: {...}} is now just {...}

So your code should look something like this:

const text = new WHS.Text({
    text: 'hello world'
    // loader: new THREE.FontLoader(), <- you don't need this. (only for custom font loaders)

    parameters: {
      size: 12,
      height: 50,
      curveSegments: 12,
      font: '/path/to/font.typeface.js', // <- this should be a path
      bevelEnabled: false,
      bevelThickness: 10,
      bevelSize: 8
    },

    material: new THREE.MeshBasicMaterial({
      color: 0xffffff
    }),

    position: {
      x: -40,
      y: 20,
      z: 0
    }
  });
  text.addTo(app);

---

Please, check if that works. If not - contact in chat (@ alex2401) for help in realtime.

[hirako2000]

The initial issue was to do with the loader (webpack bundling).
made changes to fix the doc and fix the position error as wrap() happened too soon (as build returned a promise).
Further improvement like taking an actual font instead of a path would be part of a different issue to see how we could use Importer to load the font from file.