0

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

0

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.