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.

Answer 2

LWC Component expects a default export from the imported library.Here, in this case the three.js doesn't have a default export. You need to assign exports to the default property of exports. You can see this in the below image.

In the LWC Component, Use loadScript to load the three.js from static resource. Once the promise resolves, you are good to use it.

Here, in this example, I added a Zip folder with the following structure -> threeresource/three/three.js

import THREE_LIB from '@salesforce/resourceUrl/threeresource';
import { loadScript } from 'lightning/platformResourceLoader';
import { LightningElement } from 'lwc';

export default class ThreeJsTest extends LightningElement {
    connectedCallback() {

        loadScript(this, THREE_LIB + '/three/three.js')
        .then(() => {
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        })
        .catch(error => {
            console.log('errorhere', error)
        })
    }
}