Is the loading speed of my GLTF files in ThreeJS too slow on the hosting server?

Currently, I am in the process of developing a website that features a 3D Market Place. Unfortunately, I am facing difficulties implementing the key feature of this site.

You can view the alpha version of the website here:

All the code is located in the index.html file on the site for you to review. Please excuse any clutter, as my main concern lies with the loading of 3D models into the scene.

I came across sketchfab.com, which offers an incredible feature of previewing PBR Assets within a WebGL window. The loading time on their platform is quite reasonable.

However, I encountered a problem. I aimed to create a similar feature for my website using the ThreeJS Library. While everything loads swiftly on my xampp localhost, uploading it to the host server drastically increases model load times (likely due to the high-resolution textures).

The provided code snippet showcases how I'm currently handling the loading:

[insert updated code snippet here]

I am struggling to achieve a loading speed comparable to sketchfab.com. For instance, a simple pot model on my site takes over a minute to display, whereas planes load quickly due to their low-resolution BaseColor material.

Do you have any suggestions on how to address this issue? My website is hosted through domain.com — should I reach out to them for assistance, or is this more of a ThreeJS-related matter? Are there any alternative solutions you could recommend?

javascriptthree.jsloadinggltf

Answer №1

Is there a way to improve loading speed similar to sketchfab.com? My simple pot model currently takes over a minute to display.

As mentioned in the comments, your glTF assets are too large. For example, 

StraightPot_OrangePaintedIron.gltf
has a file size of 41 MB. There are various ways to make transmission faster.

  • You can compress the geometry data of your assets with DRACO and utilize THREE.DRACOLoader along with THREE.GLTFLoader for decompression on the client side. Check out this live example demonstrating both loaders. Use tools like glTF Pipeline to compress existing glTF assets.
  • Decrease the resolution of your textures and consider using texture compression for further size reduction. Implementing platform-independent texture compression with WebGL is still somewhat challenging. Basis may simplify this process in the future.
  • Simplify the geometry of your asset overall by reducing complexity. It may also be possible to minimize the number of materials and merge corresponding textures.

three.js R108

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

Can similar named variables be restructured or revised in some way?

const { finalScore1, finalScore2, finalScore3, finalScore4, finalScore5, finalScore6, finalScore7, finalScore8, finalScore9, finalScore10, finalScore11, finalScore12, finalScore13, finalScore14, finalScore15, finalScore16, finalScore17, fin ...

javascriptreactjs

Does Angular have trouble accessing AJAX response data from the factory when combined with requirejs?

I'm facing an issue where my controller is unable to retrieve data processed from $http.get() in a requirejs environment. Any suggestions on how I can resolve this? UserFactory.js define(['app'], function (app) { app.module1.factory(&ap ...

javascriptphpajaxangularjsrequirejs

What does the JS Array Filter function return?

Is it necessary to include a return statement in the filter function when NOT using ES6 arrow syntax? Could the two separate filter functions be combined into one for efficiency? cars.filter(function(car, index) { return car[0].setAttribute("data-ori ...

javascriptjqueryarrays

JavaScript Magic: Hide Div when Clicking Away

I need a solution where clicking outside of the My DIV with the ID Container_ID will hide all elements within the Container by setting their style to display: none;. Currently, the JavaScript code I am using partially achieves this functionality, but it al ...

javascriptcss

Invoke the parent's function within the Local-Registration component of VueJs

I have a Vue object: var app = new Vue({ el: '#my-id', data() { return { example: 1 } }, methods: { exampleMethos(data) { console.log('data', data); } }, ...

javascriptvue.js

Leveraging Masonry.js with dynamically created divs using jQuery

Recently, I discovered Masonry.js and was excited to incorporate it into my projects. To test my skills, I decided to create a page that would display 16 divs with random heights and colors every time I clicked a button. However, I'm encountering an i ...

javascriptjqueryhtmlcssjquery-masonry

Checking JSON formatted actions in Rails 4: A guide to testing

I'm in the process of testing a Rails application where all my actions return data formatted in json. An example of this is within the UsersController # POST /users.json def create @user = User.new(user_params) respond_to do |format| ...

javascriptruby-on-railsjsonminitest

Creating a customized function in javascript/jquery with the ability to override it

Currently, I am utilizing Visual Studio for writing JavaScript/jQuery. For instance, when I input: $('#selector').text('foo') and then highlight text and hit F12, Visual Studio directs me to the file jquery-2.2.3.intellisense.js, auto ...

javascriptjqueryvisual-studio

Watch YouTube videos without having to open a new tab

When I open the href link in this fiddle in a new tab by using ctrl + click: https://jsfiddle.net/fNPvf/30636/, the video is opened in a new tab but does not play unless I give focus to that tab. How can I make the youtube video play automatically when ope ...

javascriptjqueryyoutube

Trigger a JavaScript function when a key is pressed down

Hey everyone, I'm trying to figure out how to trigger a JavaScript function when a particular key is pressed. For example, I want the function down() to be executed when the down key is pressed and function left() when the left key is pressed. Is ther ...

javascripthtmlfunctionkeyboard

Encountered a problem trying to post a message to Twitch chat using JavaScript and StreamElements

I'm encountering a 400 error when attempting to send a message to Twitch's IRC chat using the StreamElements API. This is my current code, and I am aware that it is incorrect. I'm struggling with passing the message to Twitch in order for i ...

javascriptajaxtwitch-api

Using switch statement upon page loading in AngularJS

I am currently working on refactoring a switch statement that identifies specific classes upon page load into one of my controllers. Does anyone have suggestions on how I can transform this straightforward task using Angular? $('.radior').eac ...

javascriptangularjsswitch-statement

What is the method for determining the size characteristics of my tree components in JSON format?

Many d3 visualization examples use the flare.json as a tree data structure illustration, such as this: { "name": "flare", "children": [ { "name": "analytics", "children": [ { "name": "cluster", "children": [ {"name": "Agglome ...

javascriptpythonjsond3.js

I am in need of creating a specialized Gulp task that can effectively strip out attributes from my HTML code

I am in need of a Gulp task that can iterate through all specified HTML documents and eliminate specific attributes (such as style=""). I initially attempted to accomplish this task the same way I would do it via the browser, but it seems that's not p ...

javascriptnpmgulp

Is it possible to provide unrestricted support for an infinite number of parameters in the typing of the extend function from Lodash

I am utilizing the "extend" function from lodash to combine the objects in the arguments as follows: import { extend } from 'lodash'; const foo1 = { item: 1 }; const foo2 = { item: 1 }; const foo3 = { item: 1 }; const foo4 = { item: 1 }; const f ...

javascripttypescript

Tips for targeting a specific div element within a webview using code in Android app development

During my exploration of focusing on a webview in Android development, I encountered a question regarding setting focus on a div element. Despite making the div element editable, neither webView.requestFocus() nor document.getElementById('container&ap ...

javascriptandroidwebview

Is there a way to trigger a function in an AngularJS controller from a Backbone controller?

I've been working on an application that was originally developed using backbone and jQuery, but we had to incorporate new modules built with angular to meet client requirements. Routing in the application is handled by backbone route, and we have suc ...

javascriptangularjsbackbone.js

How can you selectively send only the values of chosen checkboxes when dealing with hidden inputs that share the same name?

Is there a way to send only the values of selected checkboxes that are linked to hidden fields with the same name in PHP? php <input type"checkbox" name="<?echo $filename;?>_<?echo $variable;?>" id="filename_<?echo $variable;?>" valu ...

javascriptphpjqueryhtmlcheckbox

Tips for displaying additional JSON data within a single table cell in React

In my application, I have a table that displays the names of employees. Currently, there is an "EXPAND ALL" button that shows additional information for all employees at once. I am now working on implementing a feature that will expand and display the same ...

javascriptreactjsmiragejs

Why doesn't vuex4.0 function properly as hooks when used within a Vue3 onMounted async function?

When foo() is completed, I need to choose one of bar1(), bar2(), or bar3() as the actual function to be sent to the web socket and store the callback value in vuex. 1. bar1(): If I include bar1() in the onMounted scope, it does not work and the store beco ...

javascriptvue.jssocketsvuex