How to Preload a GLB Asset from a Backend URL Facing CORS and Fetch Errors?

Based on your question about preloading a GLB asset and encountering CORS errors, I can provide some guidance on handling this in Three.js.

CORS Issues with GLB Loading

When loading assets from external domains like CloudFront, CORS (Cross-Origin Resource Sharing) issues are common. For GLB files specifically, you'll want to use the GLTFLoader from Three.js.

Potential Solutions

1. Use GLTFLoader with proper CORS handling:

JAVASCRIPTCopied
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

// Create loader
const loader = new GLTFLoader();

// Set up loading manager to handle CORS
const loadingManager = new THREE.LoadingManager();
loadingManager.setURLModifier(url => {
  // You can modify URLs here if needed
  return url;
});

loader.setManager(loadingManager);

// Load the model
loader.load(
  'https://d3k9arqneg45sh.cloudfront.net/cabinets/8176f78f-5a37-4aae-a98e-d48005ea4af3?Expires=1737135002&Key-Pair-Id=KM5T7AX9Z97KC&Signature=HQ8Dtf5sAbvTLgzHG1wUkJq4UPc6d6zDQ6o9fNOFGC9dd-eFEOIap92LckPB5~TkVwr3R544-ACzh1qr7o9-~VvCl3s9Rr-',
  function (gltf) {
    // Model loaded successfully
    scene.add(gltf.scene);
  },
  function (xhr) {
    // Loading progress
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  },
  function (error) {
    // Error handling
    console.error('An error occurred loading the model:', error);
  }
);

2. Check URL format issues:

   • The URL in your example contains backticks which might be causing issues. Make sure the URL is properly formatted without any extra characters.

3. Server-side proxy:

   • If CORS issues persist, consider setting up a server-side proxy that fetches the asset and serves it from your domain.

4. CloudFront Configuration:

   • Ensure your CloudFront distribution has proper CORS headers configured. The distribution should include the following headers in the response:
     • Access-Control-Allow-Origin: * (or your specific domain)
     • Access-Control-Allow-Methods: GET, OPTIONS
     • Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept

5. Pre-signed URL verification:

   • Double-check that the pre-signed URL is valid and hasn't expired. The Expires parameter in your URL indicates when the signature will no longer be valid.

Remember that the GLTFLoader is part of the examples in Three.js, so you need to import it specifically as shown in the code example above.