Using Three.js with Lightning Web Component (LWC)

Question

I wanted to reach out because I've been working on utilizing the Three.js library alongside LWC to showcase 3D renders (in formats like .fbx or .glb).

However, I'm encountering some issues with the component's functionality.

I've followed the basic Three.js code provided in the documentation, but unfortunately, the component doesn't seem to be functioning as expected.

Your insights and guidance would be greatly appreciated.

here is my code:

.html

 <template>
  <h1>Three JS test</h1>
  <div class="container">
      <div class="canvas-container"></div>
  </div>
</template>

.js

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import THREE_JS from '@salesforce/resourceUrl/threeJS'; 

export default class ThreeJSComp extends LightningElement {
    renderedCallback() {
        // Load Three.js library dynamically
        loadScript(this, THREE_JS)
            .then(() => {
                // Once the library is loaded, you can start your Three.js setup
                console.log("init three");
                this.initializeThreeJS();
            })
            .catch(error => {
                console.log('Error loading Three.js:',error);
            });
    }

    initializeThreeJS() {
        const container = this.template.querySelector('.canvas-container');

        // Create a scene, camera, and renderer
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(container.clientWidth, container.clientHeight);
        container.appendChild(renderer.domElement);

        // Create a cube 
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        // Animation loop
        const animate = () => {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        };
        animate();
        console.log(typeof scene);
    }
}

Here is the output inside the Lightning App Builder, which it empty (no render at all)

I added the three.js lib as a static resource

I think its a salesforce limitation or security that prevents the render from showing inside the app