Hi guys!
One thing I’m worried about is how can I preload the glb asset I got from the server.
I got the model url from the server and passed it as a parameter to preload().
But I’m getting fetch error and CORs error.
The url is:
https://d3k9arqneg45sh.cloudfront.net/cabinets/8176f78f-5a37-4aae-a98e-d48005ea4af3?`Expires=1737135002&Key-Pair-Id=KM5T7AX9Z97KC&Signature=HQ8Dtf5sAbvTLgzHG1wUkJq4UPc6d6zDQ6o9fNOFGC9dd-eFEOIap92LckPB5~TkVwr3R544-ACzh1qr7o9-~VvCl3s9Rr-`
Maybe the format of this link is wrong or is there any other way to implement this?
If someone can help me I would appreciate it.
Thanks in advance.
The link isn’t working for me, I’m getting a 403 error.
Failed to load resource: the server responded with a status of 403.
You might also want to remove the backticks (“`”) when formatting the URL string.
Thank you very much.
This is my current code.
`…
const data = await axios.get(‘api/getAllModel’).data;
data.forEach((item) => {
useGLTF.preload(item.modelUrl);
}
)
…
`
My purpose is to fetch data from server to browser cache for upgrade performance.
Can you explain in more detail to fix fetch and CORs error?
It’s likely a server-side header configuration issue. If you’re using CloudFront, this SO might help you set up CORS properly with your CDN.
So, my current code piece is correct?
Since you’re using Axios, your code should look more like this:
const response = await axios.get('api/getAllModel');
const data = response.data;
data.forEach((item) => {
console.log(item);
useGLTF.preload(item.modelUrl);
});
To debug the fetched data, you can use a simple console.log(response) or console.log(data) to inspect it.
I also spent some time struggling with preloading files and models. After some research, the following structure now works for me.
// first load the CSV data, then LoadingManager, then load assets, then processing, animation
preloadCsvData( )
.then( ( ) => {
console.log('CSV data loaded:', csvData);
initializeCsvBasedData( ); // convert data into desired format
const loadingManager = new LoadingManager( ( ) => { // start LoadingManager
// ... // some code
} );
const gltfLoader = new GLTFLoader( loadingManager );
const audioLoader = new AudioLoader( loadingManager );
const textureLoader = new TextureLoader( loadingManager );
loadingAssets( gltfLoader, audioLoader, textureLoader ); // load models, audio, textures
processData();
animate(); // start animation
})
.catch( error => { console.error( 'Error when loading CSV data: ', error); } );
function preloadCsvData( ) { // load several CSV files in advance and save them in the map
return Promise.all( [
loadCsv( './Model.csv' ).then( data => csvData.set( 'Model', data ) ),
loadCsv( './Mesh.csv' ).then( data => csvData.set( 'Mesh', data ) ),
loadCsv( './Geometry.csv' ).then( data => csvData.set( 'Geometry', data ) ),
] );
}
function loadCsv( filePath ) { // load CSV file and convert to array, remove header
return fetch( filePath )
.then( response => response.text( ) )
.then( csvData => {
// ... // some code
} );
}
Thank you for your input code.
But for laodCsv(), you used file’s location as parameter but I have not this parameter information for me.
My files are stored on server, and I have to fetch this information from server using Axios get request.
But as you know, the format of model location information from server is like that:
If you use this as a parameter, I don’t think it will be recognized as location information.
How can I use this server file location URL instead of client local location.
Or is there another way?
One more thing, I am going to do preload glb and texture files. So I will use useGLTF.preload() and useTexture.preload() method.
Thank you.
Your file is an XML file that cannot be opened directly.
I wanted to test later anyway whether I can load my csv files from the server. I tried it right away.
I get a cross-origin message that leads to:
The response to the CORS request is missing the required Access-Control-Allow-Origin header, which is used to determine whether or not the resource can be accessed by content operating within the current origin.
If the server is under your control, add the origin of the requesting site to the set of domains permitted access by adding it to the Access-Control-Allow-Origin header’s value.
I’ll have to see how far my rights on the server go and how I can solve the problem.
Perfect!
Your message is same with current mine.
I have already attempted so. Look at my code.
export const getAllDesignModels = async () => {
try {
const response = await axios.get(GET_ALL_DESIGN_MODELS, {
headers: {
“Access-Control-Allow-Origin”: “*”,
“Access-Control-Allow-Credentials”: “true”,
}
});
return response.data;
} catch (error) {
console.error(‘Fetch error:’, error);
}
}
Do you think this is correct?
I don’t have the time to deal with the configuration at the moment.
But I would be more careful there:
Thank you very much.
1 Like
That was my stupid mistake in my haste! 
I had the application on the local server http:/ /127.0.0.1/threejs/… , but downloaded the file from my rented server: threejs.hofk.de …
So the error was unavoidable!
If I only use one server at a time, it works with both servers.