Use Three.js library in Lightning Web Component

Question

I am trying to migrate my Three.js code into a Lightning Web Component. My code uses the THREE namespace:

var scene = new THREE.Scene();

I uploaded the three.module.js as a static resource. But if I put the import statement in my .js-file I get the following when trying to deploy to my org:

import * as THREE from '@salesforce/resourceUrl/XXXXXV4/three.module.js';

force-app/main/default/lwc/XXXX/XXXX.js-meta.xml LWC1513: @salesforce/resourceUrl modules only support default imports.

I tried importing the library from another module but this exceeds the Salesforces size limit. Three.module.js has about 1.2 MB.

I read something about UMD format ( Import ES modules in LWC ) (which is three.js or three.min.js) but how can I still use the THREE namespace than? Also I would have the problem that OrbitControls.js imports from THREE.

Thx a lot for your help!

Best regards

Max

Answer 1

To use a third-party library, read this documentation.

You need to import the base resource file:

import THREE_LIB from '@salesforce/resourceUrl/XXXXXV4';
import { loadScript } from 'lightning/platformResourceLoader';

...

connectedCallback() {
  loadScript(this, THREE_LIB + '/three.module.js')
  .then(() => {
    this.doWhateverHere();
  })
  .catch((e) => {
    // Deal with any errors here //
  });
 }

Once your promise has returned, you can now use the THREE library as normal.

Note that your script file should export the namespace:

export default THREE;

This will retain the namespace/name of the script.