Loading complex models with Three.js

Whenever I attempt to load a significantly large file utilizing the appropriate loaders provided by the library, the tab in which my website is running crashes. Despite trying to implement the Worker class, it doesn't seem to resolve the issue. Here is the scenario:

Within the main JavaScript file, I have:

var worker = new Worker('loader.js');

Upon the user selecting one of the available models, I check for the extension and then send the file URL/path to the worker: (in this case, a pcd file)

worker.postMessage({fileType: "pcd", file: file});

Now, the loader.js file contains the necessary includes to make it function:

importScripts('js/libs/three.js/three.js');
importScripts('js/libs/three.js/PCDLoader.js');

Within its onmessage method, it utilizes the appropriate loader based on the file extension.

var loader = new THREE.PCDLoader();
loader.load(file, function (mesh) {
    postMessage({points: mesh.geometry.attributes.position.array, colors: mesh.geometry.attributes.color.array});
});

The data is successfully sent back to the main JavaScript file, which then incorporates it into the scene. However, for larger files, it takes too long and the browser assumes there was an error. I was under the impression that the Worker class was meant to work asynchronously, so what's causing the issue here?

Answer №1

The current loaders in Three.js depend on strings and arrays of strings for parsing data from files. The files are not split into smaller pieces, causing high memory usage that browsers often halt. Loading a 64 MB file can lead to memory usage spiking to over 1 GB during the process, ultimately resulting in an error.

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

The validation of radio input signals results in an error being returned

For a while now, I've been trying to solve the issue with radio button validation in my current project. Surprisingly, it works fine when there are no other functions in the form besides the radio buttons themselves. I suspect that the problem lies wi ...

Encountering a 400 error while trying to implement file upload feature in Spring AngularJS -

Whenever I attempt to upload a file using Spring and AngularJS, I keep encountering the dreaded 400 Bad Request error: > error: "Bad Request" > exception: "org.springframework.web.multipart.support.MissingServletRequestPartException" > message: " ...

I noticed that while my shareService is effectively sending values in Angular 2, I encounter an issue where my other components are displaying default values instead

I'm in the process of developing an application using angular 2. I have a UserService that sends a value to other components indicating whether a user is logged in or not, and it's working correctly in terms of data transmission. The issue I&apos ...

Prepare yourself for the possibility of receiving a caution while within a try-catch block

After implementing the MongoClient.connect method and encountering the warning 'await' has no effect on the type of this expression, it became clear that including the .catch line immediately following (which is currently commented out) mitigated ...

Can the value of a variable be passed as seen in the JavaScript code snippet?

I'm wondering if I'm on the right track with generating random colors when a button is clicked. Here's my code: randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16); // --- more code --- changeHeaderColor() { con ...

Enhancing image clips using jQuery techniques

Could someone help me figure out why the image clip value isn't changing when I move the range slider in the code below? $('#myRange').on('input', function() { var nn = $(this).val(); $("img").css({ 'clip': ...

Display buttons when hovering with React

Seeking assistance with implementing functionality in a React application where buttons for editing and deleting display only when the mouse hovers over the corresponding row. Currently, the implemented code displays these buttons in all rows on hover. Sn ...

React Three Fiber encountered an unexpected JSON token 'c' at position 3

I am encountering an issue while trying to load a .glb file using react-three-fiber. The error I'm receiving is as follows: Error Unexpected token c in JSON at position 3 I can't seem to figure out what mistake I am making - it seems that the co ...

Guide on how to have controller wait for promise to be resolved by an Angular service

Currently, I have a service that initiates an AJAX request to the backend. Service: function RetrieveCompanyDataService(options) { this.url = '/company'; this.Companies = undefined; this.CompaniesPromise = ...

Tips for resizing a larger image to display only a specific portion in CSS (and incorporating JS if needed)

I need to resize an image that measures 1024x1024 and is segmented into 4 quadrants: My goal is to reduce the size of this image so that quadrant 2 is 256x256 while masking out or hiding the remaining 3 quadrants, displaying only the desired section on th ...

Exploring the functionality of dynamic component imports in jest testing

Under a specific condition, I dynamically imported a component and stored it in an object property. Then, I displayed it in the template using vue <component :is="">. Everything is functioning correctly at the component level. However, I am ...

What is the process for incorporating Transformer instances into the buildVideoUrl() function using cloudinary-build-url?

This particular package is quite impressive, however, it seems to lack built-in support for looping gifs. Fortunately, the provided link demonstrates how custom URL sections like "e_loop" can be created. One challenge I'm facing is figuring out how t ...

How about beginning a JavaScript count with a randomly generated number?

As I work on developing this code, I am faced with a challenge: /** * Increment value with random intervals. * @param {string} id - Id of DOM Element. * @param {number} start - Start counter value. Applied immediately- * @param {number} end - End c ...

modify brand information through the use of javascript and customizable settings

In the default setting, I want all product details to be displayed. If the option value matches the product's brand name (b_name), then I want to display the corresponding details. Let's consider a list of products with their details: Samsung ...

Toggle divs by using a checkbox (Vue.js)

On my authentication page, I have implemented a checkbox that I want to use to toggle between Sign Up and Sign In forms. When the checkbox is clicked, it should display the Sign Up form, and when it's unchecked, it should show the Sign In form. I fou ...

How can I use JQuery to iterate through Object data and dynamically create tr and td elements?

In previous projects, I utilized Vanilla JS to iterate through Ajax return data and construct tables. However, for this current project, I have decided to switch over to JQuery. The main reason behind this decision is that some of the td elements require s ...

Position the Material-UI AppBar and Tab on the far right of the screen

I am trying to achieve a specific layout where the Links for "Homepage Login Settings and etc.." are placed at the right edge of the AppBar, while keeping the "Website" aligned to the left edge of the screen. Here is what I have: https://i.sstatic.net/Wvo ...

Leverage Vue's ability to inject content from one component to another is a

I am currently customizing my admin dashboard (Core-UI) to suit my specific needs. Within this customization, I have an "aside" component where I aim to load MonitorAside.vue whenever the page switches to the Monitor section (done using vue-router). Here ...

Struggling to successfully update a database using a combination of javascript and PHP

I have been attempting to update a database by utilizing JavaScript and PHP. Below is the code from my index.html: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"> ...

An error will occur if you try to modify the state of a component from outside the component

Creating a modal component that triggers a bootstrap modal from any section of the application and then defines custom states for that component externally. It is functional, however, an error message consistently appears upon opening the modal, and I am u ...