What is the most efficient method for importing external geometries into Three.js without causing any interference with the user interface?

At this moment, I am facing an issue with loading multiple .obj files (totaling 20MB) into Three.js. Although everything works fine once the files are loaded, the main problem lies in the fact that it takes approximately 25 seconds for Three.js to process the data, making the page unresponsive to user interaction during this time. The files consist solely of geometry, with no animation or materials included. This has led me to consider alternative methods for loading geometries into Three.js. I have researched options such as web workers and buffered geometry, but I have yet to find a definitive solution to address my specific problem. I am hopeful that someone can provide me with some guidance on this matter.

javascriptthree.jsgeometryloaderweb-worker

Answer №1

For efficient packing of objects, I recommend using 

examples/js/loaders/ctm/CTMLoader.js
. You can convert the objects using the tool available at

While you may experience a brief freeze in the UI during object insertion, utilizing OpenCTM should help reduce this issue. Additionally, there is a 

examples/js/loaders/ctm/CTMWorker.js
as well.

Check out live examples at and

Answer №2

Just starting out with three.js

I have found some helpful resources for you:

1. Using .addStatusElement() as a debugging tool for loading geometries:

2. Improving load time by drawing multiple objects with a single draw call: http://www.html5rocks.com/en/tutorials/webgl/million_letters/#toc-efficientwebgl

3. Understanding buffered geometry in Verold Studio:

4. Fastest method to load a large number of objects in Three.js:

If you're looking to reformat a question for clarity, consider checking out this link:

Thank you @Armam for your advice, and thank you @spencer7593 for your insights on asking good questions.

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

Tax calculator that combines item prices and applies tax multiplication

Struggling to crack the code for my calculator. Despite consulting my textbook, I can't seem to figure out why it won't calculate properly. Any advice or tips would be greatly appreciated. <html> <head> <title> Total Calculator ...

javascriptdom-events

What causes the object to tip when using trackball controls while orbiting, but not when using orbit controls?

I've noticed a strange behavior when using trackball controls to orbit - the object seems to tilt, whereas with orbit controls it does not. Can anyone shed some light on why this is happening and offer tips on how to prevent it? ...

three.js

How can I efficiently transfer information between AngularJS modules?

Angular offers the flexibility of creating independent Modules that can be reused in various parts of your application. Imagine having a module dedicated to managing lists, which you want to use across your entire application and populate in different ways ...

javascriptangularjs

Enhancing Angular 4 classes with dependency injection techniques

Currently utilizing angular 4 and angular cli for my project development. I have created some classes that serve as the base for my components! However, as the constructors of these classes grow during development, I find myself in a phase where I need to ...

javascriptangulartypescriptdependency-injection

Filter out any empty properties in JavaScript ajax formData

Need help with excluding empty fields from form data when sending via JavaScript Does anyone know how to prevent empty fields[] from being included in the formData sent through JavaScript? Desired Header Output fields[name]: name fields[phone]: phone ...

javascriptjqueryajaxform-data

What could be causing the "AJAX data not defined" error

Attempting to make an Ajax post request to the root directory on my Express server. By simply using the HTML form and submitting an artist name, I successfully receive a response back and can send the information to the client without any issues... As se ...

javascriptjquerynode.jsexpress

Issues have been encountered with the functionality of $rootScope

I am currently struggling with a code snippet in my loginCtrl.js file where I can't seem to get $rootScope to store the value of vm.userEmail. app.controller('LoginCtrl', function($timeout, $q, $log, $rootScope /*$auth*/, $location, $mdTo ...

javascriptangularjs

Clear the Material-UI textfield upon form submission

After submitting the form, how can I clear the value from the TextField? All of the components in my code are functional components, not class ones. The example below shows one of the TextFields, with others similar to it. Currently, setting type='sea ...

javascriptreact-nativematerial-ui

Ways to retrieve the output from an AJAX call

Today I'm developing a JavaScript function named "sendData". This function simplifies the process by eliminating the need to manually code an entire ajax statement. However, considering that it operates asynchronously, I found myself wondering how to ...

phpjavascriptjqueryajax

What is the best way to traverse through a nested JSON file with d3.js?

Greetings. I am currently facing a challenge in navigating through a nested JSON file. Below is the JSON data that I need assistance with: {"Id":466,"Name":"korea", "Occurrences": ...

javascriptjsond3.js

Indentation differences between PHP and JavaScript

It's interesting to observe the different indentation conventions in various programming languages. Recently, I came across a code snippet from the PHP manual that caught my attention: switch ($i) { case "apple": echo "i is apple"; ...

phpjavascriptswitch-statementconventions

A guide on distinguishing between two dates in Ionic3 using either date-fns or Moment libraries

How can I calculate the difference between two dates to determine the end of an employee's service? Similar Question: What is the best way to find the day difference between two dates using Ionic 3? I am looking for a solution on how to get the exac ...

javascriptangulardateionic3

Directive for displaying multiple rows in an Angular table using material design

I am attempting to create a dynamic datatable with expandable rows using mat-table from the material angular 2 framework. Each row has the capability of containing subrows. The data for my rows is structured as an object that may also include other sub-ob ...

javascriptangulartypescriptangular-materialangular5

Encountered a $resource configuration issue while making a request to the SharePoint REST service with Angular

In an old sample app without angularJS, a rest service is called in the following way: This app does not use angularJS. var listName = "Events"; // the url to use for the REST call. var url = SPAppWebUrl + "/_api/SP.AppContextSite(@target ...

javascriptangularjsrestsharepoint

The JSON creation response is not meeting the expected criteria

Hello, I'm currently working on generating JSON data and need assistance with the following code snippet: generateArray(array) { var map = {}; for(var i = 0; i < array.length; i++){ var obj = array[i]; var items = obj.items; ...

javascriptangulartypescript

Experimenting with mocha and Nightmare.js, utilizing traditional syntax and without the use of ES6 features

Here is a real-world example that I am using: How to Use Nightmare.js without ES6 Syntax and Yield However, when I include it in a Mocha test, it times out. Here's the code snippet: describe('Google', function() { it('should perform ...

javascriptmocha.jsnightmare

Encountering this issue despite confirming the presence of data on the line before! What could be the missing piece here? Error: Unable to access property 'includes' of undefined

Here is the situation.. I'm retrieving data from a database and storing it in an array of objects. These objects represent articles. I am working on implementing a filter system based on categories. The objective is to apply a filter that checks for a ...

javascriptreactjs

How can I manipulate image resolution and export images of varying sizes using Javascript?

I am new to using three js. I have successfully exported an image in png format using the WebGL renderer. However, when attempting to export the image in a different custom size resolution, the resolution does not change. How can I set the image resoluti ...

javascriptthree.jswebglrenderer

The information is not appearing in the dropdown menu

The select tag for chapters is not displaying the result from the query properly. Instead of showing in the select tag, the chapter names are being displayed as echo statements. <!doctype html> <html> <head> <meta charset="utf-8"> ...

javascriptphphtmlsqlselect

Shifting the data label on a pie chart in ApexCharts - what's the trick?

I need help adjusting my data labels to make them more readable by moving them inward. It would be perfect if there is a way to dynamically center them within the slice. https://i.stack.imgur.com/bCelP.png Despite reading the documentation and trying dif ...

javascriptjqueryapexcharts