0

i am trying to use Three.js(3d rendering) in lwc and so far it seems to be working with the static resource file I got from this. but I need to import additional modules like 'OrbitController' and I am at lost on how should I implement it. I have tried importing OrbitController and adding it as a 2nd static resource but it didn't work. i did some research on how static JS resources are supposed to be wrapped in Immediately Invoked Function Expression (IIFE) but coudln't find related topics. My question is: how do i create a JS file that i could utilize as static resource for LWC; because just copying the source file from github as a static resource does not work. (code is for reference between threejs file that is working in lwc whereas orbit is from source code which does not work).

   import threejs from '@salesforce/resourceUrl/threejs';
      import orbit from '@salesforce/resourceUrl/orbit';
   import { loadScript } from 'lightning/platformResourceLoader';
   import { LightningElement } from 'lwc';

    export default class Render3D extends LightningElement {
      connectedCallback() {
        loadScript(this, threejs, orbit)
          .then(() => {
            this.init();
          })
          .catch((error) => {
            this.error = error;
          });
      }

init() {
    // initialize scene, camera and renderer
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
 const controls = new orbit(camera, renderer.domElement)
function animate() {
      requestAnimationFrame(animate);
      controls.update()
      renderer.render(scene, camera);
    }
    animate();

0

You must log in to answer this question.