Loading GLTF files with Three.JS is significantly slower in comparison to other GLTF viewers

Greetings, I am in the process of creating a 3D Model Viewer using Three.Js, but I have encountered an issue with loading times that I can't seem to pinpoint.

For demonstration purposes, I am attempting to upload this model here (download link):

You can test it on this gltf Viewer here:

The model loads almost instantaneously on the viewer mentioned above.

However, when you try to load the same model on my website: , it takes well over two minutes to fully load. This delay seems abnormal, what could be causing such slow rendering?

Below is the code snippet I'm using:

<canvas id="canvas"></canvas>   
<br>            
<div style="margin:15px; margin-bottom:0px;">
    <progress id="load_lowPoly" value="0" max="100"></progress>
        
    <div id="lowPoly_progress">Loading Raw Model</div>
</div>
...
...
</script>

I initially thought this method would suffice for loading the model efficiently. However, based on the performance issues evident on my website, it's clear there is room for improvement. Any suggestions on how I can optimize and resolve this loading problem?

Answer №1

Let me take a guess:

The reason for the slow performance of your website could be attributed to the initial download time of the glb file, which tends to be lengthy.

If you compared it with a different website by downloading the glb file and dragging it into a viewer on your computer, you likely noticed a faster response. This is because everything happens locally on your device once the file is downloaded, eliminating the wait time.

To prevent these issues in the future, consider opening Chrome developer tools, navigating to the "Performance" tab, and initiating a recording. After refreshing your webpage and stopping the recording when the model appears, check the "Network" dropdown below the frames in the profiler. Here, you may discover that loading your .glb file took approximately 1.2 minutes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display an array of objects using React within the columns of a Bootstrap grid

I am facing a challenge where I have an array of components that I need to render in separate cells. The number of elements in the array can vary, sometimes exceeding the limit of 12 cells in the Bootstrap grid system. In such cases, I need to create new r ...

What is the best way to display multiple files in a vertical stack when choosing a file?

<div class="selected-file-container align-items-center justify-content-between d-none"> <div class="selected-file d-flex align-items-center"> <img id="selectedImage" class="hidden" src="&qu ...

Retrieve data from jQuery and send it to PHP multiple times

<input type="checkbox" value="<?= $servicii_content[$j]['title'] ?>" name="check_list" id="check" /> By using jQuery, I am able to extract multiple values from the table above once the checkboxes are checked. Here's how: var te ...

Stop users from being able to select or highlight text within a content editable div

Is there a method to develop a content-editable div where users are unable to select or highlight content, but can still input information? I'm interested in creating an interface that forces users to delete and enter data character by character, with ...

Send an AJAX request to the server without waiting for a response using a JavaScript variable

My click counter is not sending variables to the server. I have tried finding examples on how to do this, but no matter what I attempt, the data is not being sent to the server. It seems like using AJAX would be the best option, but I must be doing someth ...

Error Encountered in .then Method with Vue.js

I am working on a GET request that determines whether the user is an Admin or not. The challenge I am facing is that I need to show a button using the v-if directive to verify if the value is true or false. By default, the value is set to false. Informati ...

Determine the number of properties present in two arrays by comparing them

Looking to compare two arrays and determine the count of items in the master list. A sample master list could be: { name: 'Emily', age: 29 }, { name: 'Jack', age: 31 }, { name: 'Lily', age: 28 }, { name: 'Emily', a ...

What is the best way to pass a function along with its state to utilize useContext in React

Currently attempting to grasp the concept of using react hooks. I have implemented createContext and am looking to pass both state and a function to other components, but could use some guidance on how to achieve this. I'm also questioning if it is ev ...

Exploring the realms of development and production with Next JS and Vercel

I've recently developed a movie database application using Next JS to explore its functionality. This app allows users to create, read, update, and delete data in Firebase by utilizing the API endpoints provided by NextJS. While the app works smoothl ...

Is it possible for me to retrieve/load a <datalist> element from a different file?

I'm in the process of developing a Google Chrome extension that essentially consists of a dropdown menu and an input box with datalists. The user can change their selection in the dropdown menu, which will then switch the datalist being used by the in ...

Creating an Angular directive that shares a single scope while displaying multiple behaviors

I am facing a specific scenario with my directive where the refresh scope needs to be either an object or a function. How can I properly assign this to my directive? 1. Initial scenario <!--HTML--> <directive refresh="vm.refresh"> </dir ...

A guide on invoking a JavaScript function after receiving a response from an AJAX request

I am facing an issue with a $.POST call that returns the name of a function to be executed, however, the function is not being triggered and I'm unsure why. Below is an example: JavaScript file snippet: $(function(){ $.post('test.php&apos ...

Troubleshooting issue with Onchange in select HTML element within Django

I'm working with a Problems model in my project. In my Models file models.py class Problems(models.Model): Easy = 'Easy' Medium = 'Medium' Hard = 'Hard' NA = 'NA' DIFFICULTY = [ (NA ...

Encountering the React.Children.only error while trying to use the <Link> component in Next.js

I'm encountering an issue with the code below: Error: React.Children.only expected to receive a single React element child. While trying to troubleshoot, I noticed that it only allows me to have one header under the link. <div className="co ...

Utilizing jspm for installing npm packages along with their dependencies

When using jspm, I can easily install npm packages by running: jspm install npm:<pkg-name>. This allows me to use the package in development, like so: import myPackage from 'myPackage';. If the package.json file of the npm package includes ...

Is it possible to temporarily change the state and then revert it back to its original state by utilizing settimeout?

I'm trying to temporarily set the value to true for one second and then revert it back to false using setTimeout, but I'm encountering an issue with my code. Here's what I have so far: const [value, setValue] = useState(false) const handleCl ...

Turn off caching for the 'value' event in the Firebase Realtime Database using JS SDK

When setting up a listener for the realtime database : firebaseDb.ref(ref).on('value', (snapshot) => { console.log('snap', snap); const response = snapshot.val(); }); The snapshot is saved for offline use, and upon page refresh, ...

Here is a way to trigger a function when a select option is changed, passing the selected option as a parameter to the function

Is there a way to call a function with specific parameters when the value of a select element changes in Angular? <div class="col-sm-6 col-md-4"> <label class="mobileNumberLabel " for="mobilrNumber">Select Service</label> <div cla ...

Create separate arrays for the names and values when returning JSON

Suppose I have a JSON object like this: { "ID": 100, "Name": "Sharon", "Classes":{ "Mathematics": 4, "English": 85, "Chemistry": 70, "Physics": 4, "Biology" ...

Looking for guidance on where to find a functional code sample or comprehensive tutorial on working with ViewMetadata in Angular2

I am currently trying to understand the relationship between viewmetadata and the fundamental use of encapsulation: ViewEncapsulation, including ViewEncapsulation.Emulated and ViewEncapsulation.None. Here is a link for further information: https://angula ...