4

I am trying to use Three.js with three-bmfont-text to create text in 3D and give it a nice look using shaders.

I install three and three-bmfont-text through npm and import it in JS file:

                import * as THREE from 'three';
                const loadFont = require('load-bmfont');
                const createGeometry = require('three-bmfont-text');

I run npm run dev and npm run watch and everything seems to work fine, but in chrome developer it logs the following error :

app.js:3524 Uncaught ReferenceError: THREE is not defined at Object../node_modules/three-bmfont-text/index.js

I tried to install and uninstall three and three-bmfont-text but nothing changes, what am I missing?

gman
  • 100,619
  • 31
  • 269
  • 393
Fulvio
  • 229
  • 1
  • 3
  • 10

1 Answers1

1

Maybe it helps somebody who finds this question. This one quite popular in google.

You need to add this in webpack (link):

plugins: [
    new webpack.ProvidePlugin({
      THREE: 'three'
    })
  ]

If you are using next (link):

config.plugins.push(
 new webpack.ProvidePlugin({
  THREE: 'three',
 })
)
VladykoD
  • 284
  • 2
  • 8