Is there a way to intigrate three.js succesfully in shopify?

I have for a while tried to integrate a three.js object into Shopify.

My goal is to insert this 3d object into the homepage.

This is the html/liquid i have inserted on the homepage as a custom liquid section:

<canvas id="bg"></canvas>

On a seperate .js file

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.117.1/build/three.module.js';
import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js';


// Setup
const scene = new THREE.Scene();


const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#bg'),
});

renderer.setPixelRatio(window.devicePixelRatio*2);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(45);
camera.position.setX(0);
camera.position.setY(7);

renderer.render(scene, camera);

    // Torus

    // const geometry = new THREE.TorusGeometry(10, 3, 16, 100);
    // const material = new THREE.MeshStandardMaterial({ color: 0xff6347 });
    // const torus = new THREE.Mesh(geometry, material);

    // scene.add(torus);

    // Taiyo

let loadedModel;
const loader = new GLTFLoader();

loader.load( 'https://cdn.shopify.com/s/files/1/0551/2708/1111/files/taiyo_shiny.gltf?v=1662981628', function ( gltf ) {

loadedModel = gltf;
scene.position.y = Math.PI / 8;
scene.position.y = 0;
scene.scale.set(4.2, 4.2, 4.2);
scene.add( gltf.scene );

}, undefined, function ( error ) {

   console.error( error );

} );

    // Lights

const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(5, 5, 5);

const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(pointLight, ambientLight);

    // Helpers

    // const lightHelper = new THREE.PointLightHelper(pointLight)
    // const gridHelper = new THREE.GridHelper(200, 50);
    // scene.add(lightHelper, gridHelper)

    // const controls = new OrbitControls(camera, renderer.domElement);

    // Background

    // const spaceTexture = new THREE.TextureLoader().load('space.jpg');
const spaceTexture = new THREE.Color( 0xffffff );
scene.background = spaceTexture;

    //const material = new THREE.MeshPhongMaterial( { shininess: 100 } )
    //scene.add(material);


    // Add listener for window resize.
window.addEventListener('resize', onWindowResize, false);

    // Animation Loop

function animate() {
  requestAnimationFrame(animate);

      // loadedModel.scene.rotation.x += 0.01;
  loadedModel.scene.rotation.y += 0.0075;
      // loadedModel.scene.rotation.z += 0.01;

      //controls.update();

  renderer.render(scene, camera);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

animate();

It only appears as a little empty box: Here

It looks to be a importing problem from the looks of it in the google sources. But dosent show up in google console.

.

Thank you so much for using your valuable time to read this question. I will be extatic if anyone has to know the answer to the problem I am facing!