What is the most effective method for storing a three.js scene on a server?

Currently, I am in the process of developing a web application that utilizes three.js for rendering 3D models. One of the features I have already implemented is the ability to create a project by selecting a base model (which can be in various formats such as .obj+.mtl, .3ds, etc.). Now, my next task is to add a save feature that will allow users to save the active three.js scene to the server as a JSON file. However, one major issue I am facing is that the size of the exported file ends up being extremely large.

For instance, when I convert a 24MB obj+mtl model (including textures) into a text file using JSON.stringify(scene.toJSON()), the resulting file size balloons to 208MB! Transmitting 208MB of data to the server every time a user saves their work isn't practical or efficient. To address this challenge, I've been exploring options for creating a patch file that captures the differences between two JSON objects representing the same scene data. While this method helps reduce file size, there are still limitations since the initial transfer to the server requires sending the complete file.

In an attempt to decrease file sizes, I experimented with exporting the same model without the mtl file, resulting in a much more manageable 31MB file size. My main question now is whether there are techniques available for exporting scenes without including textures. If so, how would I go about reconstructing the scene from the exported file and specifying the texture path for loading textures? Additionally, I'm seeking guidance on the most effective approach for saving a three.js scene to the server. Given my limited experience in this area, any corrections or suggestions are greatly appreciated.

Answer №1

Here are a few recommendations, ranked by my personal preference:

  1. To reduce data size, consider excluding textures (or replacing them with IDs) when sending data to the server if users aren't editing them in your application. You can always replace the texture IDs with actual textures in the JSON before rendering.

  2. Try using GLTFExporter (example) for scene export. glTF combines JSON and binary data and is likely more efficient for transmission compared to OBJ or three.js JSON formats. Keep in mind that not all three.js features are supported in glTF.

  3. Consider using OBJExporter (example) for exporting the scene. Note that OBJ may have fewer capabilities than three.js JSON or glTF.

Your decision should be based on the type of changes users can make in your editor. If you require support for every possible three.js feature, then three.js JSON would be the most suitable option.

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

Promise rejection not caught: ; Zone: angular ; Task:

While using meteor and trying to set up a (click) attribute, I encountered the following error message. https://i.sstatic.net/Qzk9T.png This is my code: import { Component, NgZone, AfterContentInit } from 'angular2/core'; import { NgIf, NgFor ...

Traversing a deeply nested array of objects, comparing it with a separate array of objects

I am currently learning Javascript and facing a challenge involving looping through nested arrays of objects and filtering another array based on specific properties. Let's take a look at the structure of both arrays: const displayArr = { section ...

Encountering the "JavaScript heap out of memory" error is a frequent occurrence when running npm scripts

Encountering issues with running npm and seeing the error message FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory. This problem arose after installing node.js&npm on my new PC. The only npm command that functions pro ...

Updating the key within an array of objects

In my array of objects, I have the following data: arrayOfObject = [{'key1': [1,2]} , {'key2': [1,2,3]} , {'key3': [1,2,4]}] I know the name of the key that I want to replace in my array : var keyString = 'key1&apos ...

Utilizing checkboxes to toggle the visibility of a div element with varying headings

By toggling a checkbox, I aim to show or hide the same div with a different heading. $('#cbxShowHide').click(function() { this.checked ? $('#block').show(1000) : $('#block').hide(1000); }); #block { display: none; bac ...

What is the reason behind the non-exportation of actions in Redux Toolkit for ReactJS?

Currently, I am utilizing @reduxjs/toolkit along with reactjs to create a shopping cart feature. However, I am encountering an issue when attempting to export actions from Cart.js and import them into other files like cart.jsx and header.jsx. The error mes ...

Retrieve image data by capturing the image from the input field and showing it on the screen

I've been searching online and can't seem to find a clear answer on whether this task is possible. Here's what I want to achieve before submission: When a user chooses a file for upload, I aim to extract the image data and convert it into b ...

Restricting the number of items allowed in an ajax request

I need to retrieve information from a json file in order to populate a table. I only want to request a maximum of 5 items. jQuery.getJSON("data/data.json", function(data) { var table = $("table"); $.each(data, function(id, elem) { table.ap ...

Adding additional functionalities to ng-blur within the controller: A step-by-step guide

I am seeking to enhance the functionality of ng-blur for all input and textarea fields by adding a new function. These elements already have an existing ng-blur defined in the HTML, and my goal is to incorporate a new function into this existing setup from ...

Local connections are successfully established with Socket.IO, however, external connections are experiencing difficulties

I'm a beginner in Node.js and currently working on a simple chat application. However, I have hit a roadblock. I've tried searching online and using various solutions, but I still can't seem to get it to work. If anyone could lend a hand, ...

Error occurred while attempting to upload a file using multipart form data: TypeError message displayed - Unable to access properties of undefined (specifically '0')

I am encountering an issue while trying to send multipart/form-data using axios from the frontend. The same post request works fine in Postman/Insomnia but fails when executed from the frontend. The backend shows the following error: node:events:505 ...

Collecting User Input Within an NgRepeat Directive Using AngularJS

I am working on an AngularJS application with an ngRepeat directive. Within this directive, there is a textbox that allows users to input numeric values. I want to capture this user input and perform actions based on it whenever the textbox changes. How ...

Adding a JavaScript file to enhance the functionality of an AJAX response

In my project, I have implemented a dropdown that triggers an AJAX call each time an option is selected. The AJAX call returns HTML markup containing buttons, text boxes, and a script tag. The buttons in the HTML markup use this script tag to submit data t ...

Is there a way to search for multiple items using just one search term?

On my app, there is a search bar that currently only looks up data for one specific attribute. For example, if I type in "Hammer," it only searches for Tool names. Now, I need to expand the search functionality to accommodate different types of strings. F ...

Live API for the back-end and front-end

I have an exciting project in mind to develop both a front end and back end API that updates data in real time. My idea is to create something like a Forex "viewer" using . However, I want to build the server infrastructure myself, fetch data from this AP ...

Running ASP.Net with HTML5 JS and Twitter Bootstrap produces a unique design

During development, everything appears to be working fine in my environment. I have a pie chart that uses canvas and animation, and it displays correctly when hosted through the browser. Additionally, I am utilizing Twitter Bootstrap and have a navigation ...

Struggling with the nested array of objects

I have utilized Mongodb aggregation and used the $facet operator to count each value of "reli" and "prov" from the collection. Here is the code I used to retrieve results from the database: const keyy = await db.aggregate([ $facet: { "reli": [ { $group ...

What is the best way to implement nested iterations in Jade?

ul li a(href='') menu1 li a(href='') menu2 ul li a(href='') sub-menu2 li a(href='') menu3 ul li a(href=&apos ...

Using Node.js and React to dynamically render a different HTML file in response to a request

We are currently working on implementing AMP pages for our project. Our current solution involves detecting a query in the URL, such as: myurl.com?amp=1, and completely redrawing the page with the necessary markup. However, our server is set up to choose ...

How can I access an object from a JavaScript file within a Laravel blade template?

I am trying to implement the package Sortablejs in my blade file. After installing it with npm, I created a sortable.js file within my assets folder containing the following code: import Sortable from "sortablejs"; This file is compiled into th ...