Utilizing Three.js to showcase large 3D images from a JSON file

I am in need of showcasing 3D images. I have a .obj file that is 80 MB in size which I converted to a json file size of nearly 75 MB. While using three js, I managed to display a rotating 3D image, but the main issue is the loading speed, which currently takes almost 1 minute.

Moreover, the client expects to have 2 similar images displayed on the same page, which I have achieved, but the loading time for both images is approximately 4-5 minutes.

Is there any way to enhance the loading speed? Any possible workaround for this situation?

Answer №1

Avoid using an 80MB object in a web application due to its size. If the model lacks detail, check for exporter issues causing unnecessary information. For highly complex models, consider simplifying or using a lower polygon count alternative.

When dealing with client-provided models, prepare to discuss limitations and solutions. Compression and decompression techniques can help manage data size. Explore client-side data compression options for guidance.

Consider breaking down large models into smaller pieces for better loading efficiency. Strategically load chunks of vertex and index data to enhance performance. Collaboration with a 3D artist can lead to optimizing model segmentation for smoother scene loading.

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

What is the best method for implementing ajax in Codeigniter?

Exploring the best approach to writing ajax in CodeIgniter. Is it acceptable to write ajax in views, or is it better to create a new directory named assets at the root of the CodeIgniter project folder and relocate all scripts to a js folder within our a ...

Executing a function following the removal of an element

I am trying to remove an element after exiting a jQuery dialog. I have used the .remove() function, but the element is not accessible after executing .remove(). How can I "destroy" an object in JavaScript and allow it to be called again without refreshing ...

Tips for keeping the main section from scrolling while scrolling through the side navigation

Within my Angular application, I have implemented a sidenav and a main section. My desired behavior is to prevent any scrolling in the main section while I am scrolling in the sidenav, similar to the functionality seen on the Angular Material Design docume ...

Error in React Native - Invalid component type provided

I'm encountering an issue while building a React Native app with Expo CLI. Every time I test it, I receive an error message. How can I troubleshoot and resolve this problem? Error: Element type is invalid: expected a string (for built-in components) ...

Updating Angular components by consolidating multiple inputs and outputs into a unified configuration object

When I develop components, they often begin with numerous @Input and @Output properties. However, as I continue to add more properties, I find it beneficial to transition to utilizing a single config object as the input. For instance, consider a component ...

What is the best way to create a sleek typewriter effect transition by hovering between tabs?

When hovering over a tab, the content in the main content area's child div should be displayed from a sibling div that holds the content. Initially, the details div style is set to hide the contents but upon hover, it is displayed. The described func ...

Discovering the selected row with jqueryIs there a way to locate

There is a table with rows and a button that allows you to select a row: <table id="mytable" class="table-striped"> <tbody> <tr id="1"><td>Test1</td></tr> <tr id="2"><td>Test2</td>& ...

Incorporate a JavaScript library into a personalized JavaScript file that is utilized within my Angular2 project

Integrating Machine Learning into my Angular2 project using the "synaptic.js" JavaScript library is my goal. After executing the command npm install synaptic --save I intend to execute a custom javascript file (myJsFile.js): function myFunction() { v ...

Troubleshooting AngularJS application by Manipulating List Items

Having trouble debugging Angular lately. It feels like things are breaking and fixing themselves magically. For instance, I had an ajax call to delete a "site" which was working fine until I decided to add some code to remove it from the list as well. Now, ...

Ways to periodically create random values and transmit them using MQTT protocol

I need help generating and publishing unique random values to the MQTT protocol every second. Currently, my code keeps sending the same value repeatedly instead of a different one each time. How can I fix this? var mqtt = require('mqtt') var Bro ...

What could be the reason my dropdown menu is not appearing on hover?

Currently, I am in the process of developing a menu using angularJS and google app script within a dialog box. I have been referring to this sample code for guidance. Instead of pasting all my code here, I can summarize what I have come up with: var a ...

Leverage Redis to facilitate memory sharing among node.js instances in RxJS

We are currently developing a project that involves creating an event processor using RxJS. The system relies on specific rules where input is collected from various sources and output is generated based on the frequency of inputs exceeding a certain thres ...

There are two references to an object, but even if one of them is modified, the second reference continues to show the

During my attempts to troubleshoot an issue in a JS plugin, I noticed that one variable was sometimes affecting another and sometimes not. In order to investigate further, I added the following code: var a = $('#w3').data('fileinput'). ...

What is the best way to extract the value associated with the "first_name" key in the given object?

What is the best way to extract the value associated with the first_name key from the object below? { "first_name": "D", "last_name": "N", "phone_number": 1233414234 } ...

What ways can we implement identification features in Flutter Web applications, such as adding an ID or name property?

While developing a Flutter Web application, I am exploring a Web-UI-Testing framework that is Selenium-based. Unfortunately, I am struggling to locate an HTML element that represents a specific flutter widget by its id or name attribute. The widget key doe ...

The error message from Object.create() indicates that the argument provided is not recognized as

Description Within my project, I am handling a JSON file, parsing it into an object, and attempting to transform it into an instance of the ProjectFile class using Object.create(). Code let tmpFileContent = fs.readFileSync(tmpPath, {encoding: 'utf- ...

Update the input field's placeholder with the current date

Is it possible to dynamically set the placeholders for <input type='date' placeholder='{{ 'currentDate' }}'>? I have tried using the following variable: currentDate = this.datePipe.transform(new Date(), "yyyy-MM-dd& ...

Google Maps fails to load when triggered by the jQuery show() function

One issue I'm facing is that the Google Map is not loading after the show() function is called in jQuery. Initially, I use display:none to close a division on page load. After some research, I found out that it can be resolved by using google.maps.eve ...

Utilizing a CSS/HTML div grid to mirror a 2D array in JavaScript

Currently, I am working on a personal project that involves creating a grid of divs in HTML corresponding to a 2D array in JavaScript. However, I am uncertain about the most effective way to accomplish this task. Specifically, what I aim to achieve is tha ...

Tips for aligning the camera to ensure the object maintains a consistent pixel width and height on the screen

I am grappling with a challenge that I'm unsure how to approach, hoping someone can offer me a clue on the solution. My goal is to position the camera at a specific z index so that a cube appears on the screen with consistent pixel dimensions regardl ...