Advancement of Loading Techniques for Enhanced 3D Rendering in Three.js

Currently, I am integrating stl files into a three.js scene through the use of the STL loader. The size of these stl files varies from 5mb to 50mb.

I am seeking a solution that would allow me to gradually load/stream/increase level of detail (unsure of technical term) as the model loads in order to prevent users from facing an extended period of looking at a blank screen before anything is visible.

In the case where the model consists of 20,000 triangles, does three.js offer a feature that enables loading only 2,000 initially and then progressing to display the fully detailed model?

Answer №1

Progressive loading and mesh streaming is not currently a built-in feature, but it would be fantastic to have and is definitely achievable.

A method using POP buffers has been developed for WebGL without relying on three.js: & https://github.com/thibauts/pop-buffer

You can see one of the demos here:

Hopefully, in the future, we will also have a nice progressive loading system like POP buffer (or a similar alternative) for three.js - it's on my/our to-do/wishlist as well, but there are many tasks to tackle before that happens.. however, I wouldn't mind if someone beats us to it!

While Three does provide a basic LOD mechanism to assist with rendering load, it doesn't specifically address loading time: &

For a straightforward solution, you could create low and high versions of your models and implement custom loading logic to initially load the low version and display it, then gradually load the high version afterward.

We've employed this approach in a project before, and it worked smoothly as expected. The only downside we observed was an increase in total loading time for the high version. Nevertheless, since the low poly version can be very small (untextured with only vertex colors), it's manageable until the high-res version loads.

Answer №2

One of the top recommendations for this issue is the cutting-edge Nexus software, which has undergone significant advancements over recent years. It includes a specialized loader designed for threejs integration.

Answer №3

For those looking for solutions in progressive Level of Detail (LoD) loading, consider utilizing Nexus and popbuffer. However, if simplicity is key and you're just seeking a working solution, check out this resource: https://github.com/amd/rest3d

Operating on the GLTF format, it transmits individual mesh elements sequentially. This approach helps to minimize waiting time for initial rendering. By organizing mesh data differently and implementing a streaming buffer for downloading data, it's possible to achieve progressive loading and rendering outcomes.

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

Why isn't my state being updated properly with React's useEffect, useState, setInterval, and setTimeout functions?

const handleClick = () => { if (!activated) { if (inputValue == '') { return } if (!isNodeInGraph(graph, inputValue)) { return } } setActiv ...

Learn how to retrieve data by clicking on the previous and next buttons in FullCalendar using Vue.js

Seeking guidance on retrieving calendar data from the database for my Vue frontend, I have incorporated the fullcalendar API. Successfully able to retrieve data for the current week, however facing challenges when attempting to fetch data for the previous ...

What is the best way to enable an element to be dragged from just a single point?

I am facing a challenge with a parent div (such as "#strip17") that contains multiple child divs. Most of these child divs consist of a canvas where the user can draw using their mouse. However, the last child div should act as a handle that allows the use ...

Is there a way to control a single Angular application using multiple JavaScript scripts?

Summary: I am looking for a way to allow two script files to handle different tasks within the same angular app. One needs to initialize the app, while the other needs to assign a templateCache object to a section of JSON stored in localStorage. Backgrou ...

Using the jQuery function in conjunction with Infinite Ajax Scroll provides a seamless scrolling

Utilizing jQuery for filtering options can enhance the user experience. For instance, selecting the "dead" option displays only rows with the status "dead". However, when implementing infinite Ajax scroll to load new data from the database, the filter sett ...

Error: The function semrush.backlinks_refdomains does not exist as a valid function

Hey there! So I've been working with the SEMRUSH API and encountered an issue when trying to retrieve data using backlinks_refdomains and backlinks_refips. However, when I called the domain_rank function, it responded in JSON format without any proble ...

Storing POST data in MongoDB using Node.js

I'm a beginner with node.js and I'm looking to save data from an HTML form (such as username, password, email, etc.) into MongoDB. Here is the code snippet that I am using: var Schema = new mongoose.Schema({ _id : String, name: St ...

Error encountered during decryption with AES encryption: 'ERR_OSSL_EVP_WRONG_FINAL_BLOCK_LENGTH'

I am attempting to decrypt data retrieved from MongoDB using a key and initialization vector (IV) that were stored in an environment function. However, I keep encountering the following error: ERR_OSSL_EVP_WRONG_FINAL_BLOCK_LENGTH app.get("/recieve", as ...

Passing props from parent component to map function in ReactJS results in undefined props

In my project, I dynamically create <textarea> elements using the map() function. Each textarea should have a unique value when the component is rendered. // Within the render method of ComponentA fruits.map((fruit) => { return <textarea na ...

res.render() Displaying Data in Frontend using Local Variables

I have a question regarding defining local variables in Express. When I use res.render(view, {variable: variable}), how can these variables be accessed on the frontend? Where are they stored? I attempted to access a variable with console.log(variable), but ...

Refresh all tabs in the TabContainer

I have implemented multiple tabs using dojo on a web page, and I need to refresh the current tab every 5 seconds without refreshing the entire page. You can check out the code in this fiddle: http://jsfiddle.net/5yn2hLv9/4/. Here is an example of the code ...

Unable to access ng-model values within ng-repeat loop

I'm having trouble setting ng-model values within an ng-repeat statement. When I repeat this div with an array of JSON objects, I am able to print the 'ID' value of the object in any element. However, I can't use that as the ng-model v ...

Is there a way to identify the source of a div's scrolling behavior?

While working on a complex web page that involves multiple JQuery Dialogs and other widgets, I encountered a frustrating issue. Some of the dialogs contain divs with scrolling abilities (using overflow-y with a fixed height). Whenever I click on one dialog ...

Efficiently converting arrays to strings in JavaScript using mapping techniques

My goal is to retrieve data through AJAX without formatting it as JSON, so I took the initiative to encode it myself. The data I am working with consists of client records: where the pound sign (#) separates the client records, the pipe sign (|) separates ...

Functionality of the button disabled in Firefox, despite working perfectly in Chrome

I have been developing a ReactJS application that is now live. Take a look at the deployed version to understand the issue I am facing. In Firefox, the Login button in the Inventory Login section doesn't seem to be working as expected. Despite having ...

Utilizing jQuery AJAX to Send an HTML Array to PHP

In my current HTML forms and jQuery AJAX workflow within the Codeigniter Framework, I've encountered a common issue that has yet to be resolved to suit my specific requirements. Here's the situation: HTML - The form includes an array named addre ...

Shut down a pop-up overlay

I've been facing a challenge in implementing greasemonkey to automatically close a modal when the "x" button is clicked. Allow me to share with you the code snippet for the webpage: <div class="modal-header"> <button type="button" class="clo ...

Guide on changing the color of an input box based on the variable size in ReactJs!

I need help with a disabled input box that receives a variable x, which can be either < 1 or > 1. My goal is to change the background color to red if x > 1, green if x < 1, and grey if there's no value provided. Here is what I have attempt ...

Utilizing Jquery Ajax to send a post request containing input values through Tampermonkey

I encountered an issue with my code - even though the logs in console show that it is working, I am unable to send the values to my server using AJAX post. jQ(document).on("keyup", "form input", function () { var value = jQ(this).val(); ...

Loop through a nested array and output the playerId, playerName, and playerCategory for each player

update 3: After thorough debugging, I finally found the solution and it has been provided below. let values = { "sportsEntitties": [{ "sportsEntityId": 30085585, "sportsEntityName": "490349903434903490", "sportsEntityStartDate": "7878 ...