Compressing JSON Files with Three.js

I currently have a variety of functional Three.js WebGL web pages that can be viewed at the following link:

Despite their functionality, the JSON files I host on a static ftp server have surprisingly large file sizes ranging from 4 to 6MB. This is primarily due to the abundance of "vertices" present in the JSON object. To address this issue, I have been able to compress these files down to around 1MB using tar.gz on my personal computer. I am curious if there is a potential method to compress these files and enable the user's browser to decompress the file using JavaScript before loading it into the Three.js JSONLoader.

javascriptjsonthree.js

Answer №1

Caution: The JSON library has undergone changes, so its compatibility may be limited outside of Python 3.

I suggest creating a custom script to re-serialize the JSON data and control the floating point precision. JSON's default precision of up to 16 decimal places can significantly increase file size. In my experience with the Blender exporter, I had to modify the JSON library for this purpose. You can find the modifications made in the source code here (although it's not pretty). It might be possible to adapt these changes for standalone use away from Blender.

For reference, here is the link to the JSON modification: https://github.com/mrdoob/three.js/blob/master/utils/exporters/blender/addons/io_three/exporter/_json.py

Implementation of dump() function for Blender exporter can be found here: https://github.com/mrdoob/three.js/blob/master/utils/exporters/blender/addons/io_three/exporter/io.py#L17

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

Identifying Peaks: A guide to highlighting local maxima on a live chart created with HighCharts

Discover the magic of coding by checking out this jsfiddle link http://jsfiddle.net/MzQE8/19/ Behold, my masterpiece of code $(function () { $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: ...

javascriptcsshighchartsdata-visualization

I am unfamiliar with this particular operation

I'm currently attempting to integrate MD5 .js from webtoolkit into my project. However, I am facing an issue where the method MD5 is not being recognized when invoked from a script in jQuery. I have already ruled out any problems with loading the js f ...

javascriptjquerymd5

Generate a binary string using JavaScript and then transform it into C#

I have an upload section in my JavaScript program. I utilize JS FileReader to obtain a binary string of the uploaded document before sending it to my C# WebApi for storage on the server. JavaScript Code let myFile = ev.target.files[0]; if(myFile.size > ...

javascriptc#typescriptfilereader

Running and storing JavaScript in NEW Selenium IDE: A comprehensive guide

I am facing a challenge with updating my old test scripts that were originally created for the outdated Selenium IDE. The task at hand is to modify them to work with the latest version of Selenium, but I am struggling to make sense of how to handle section ...

javascriptselenium

Add jQuery and underscore libraries to an AngularJS component

For my new service, I am incorporating angularjs, underscore, and jQuery: myModule.factory('MyService', ['MyResource', function (MyResource) { .... // Utilizing _ and $ }]); How can I properly inject underscore and jQuery int ...

javascriptjqueryangularjsunderscore.js

You are unable to reference a member within the embed in discord.js v13

I created a system for logging join and leave events in my server. However, I encountered an issue where the member is not mentioned when the bot sends the embed in the channel. Here is a snippet of my code: client.on('guildMemberAdd', guildMemb ...

javascriptnode.jsdiscorddiscord.js

The solution for resolving vue updates using checkboxes

I am currently working on creating a tree view with checkboxes where the parent node's state is always based on its children, including indeterminate values, and v-model it into an array. Here's what I have managed to do so far. The issue arises ...

javascriptvue.jsvuejs2vue-componentvuetify.js

When loading a page for the first time, the Vue.js transition does not take effect

After setting up a navbar that switches between two components, I encountered an issue with the fade-in animation not running when the page is first opened. The animation only works when using the navbar links to switch components. Any suggestions on how t ...

javascriptvue.js

Optimal Placement of jQuery Event Handlers in React/Redux Components with Asynchronous Data Loading

After reviewing the ReactJS documentation, it's clear that the most suitable lifecycle method for handling redux action calls is componentDidMount. However, I'm facing a challenge when it comes to incorporating jQuery operations within this parti ...

javascriptjqueryreactjsredux

Display or conceal columns based on their index

<div ng-controller="checkBoxController"> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="moda ...

javascripthtmlangularjshtml-table

Vue modal fails to display when triggered by a specific query parameter

I've encountered an interesting challenge with my Vue.js app. Currently, the modal is displayed correctly when a button is clicked using the show() method: <script> export default { methods: { show() { console.log("showing modal ...

javascriptvue.jsmodal-dialog

Showing child elements within a div using AngularJS

I am eager to create a straightforward AngularJS website that will showcase an initially hidden HTML element along with all of its children. Below is the HTML structure snippet I plan to use: <div class="hiddenStuff"> <h3>Game Over</h3&g ...

javascripthtmlcssangularjs

Tips on organizing JSON data with JavaScript

After receiving my $http response, the data is presented in the format below: $scope.rooms = { '2B' : [ {"RoomEmailId":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ebd9a9c6d8d9d8ab868ec5888486" ...

javascriptarraysjson

How to seamlessly integrate Redux into your React project using create-react-app?

Is it correct to pass a reducer as props when using a rootreducer? This is the content of my rootReducer.js file: import { combineReducers } from 'redux'; import simpleReducer from './simpleReducer'; import messageReducer from '. ...

javascriptreactjsreact-reduxcreate-react-app

Combining Observations through Conditionals

I am trying to retrieve a file through http that contains information about other files which are needed in the main file. These could be xsd files with imports, or any other type of file. You can check out the code here: https://stackblitz.com/edit/angul ...

javascriptangularxsdrxjsobservable

Implementing Authorization token management with Axios in a Node.js environment

Looking to incorporate axios into my API tests. In order to set up the client, I need to first establish an authentication token, which I hope to retrieve using axios as well. What is the best way to retrieve it from asynchronous code? const axios = req ...

javascriptnode.jsaxios

Importing Massive Twitter JSON Data (7GB+) into Python

Recently, I established a public stream on AWS to gather tweets for preliminary analysis. The data is saved in an S3 bucket in 5mb files. After consolidating and merging the files into one, each tweet is now stored as a standard JSON object per Twitter gu ...

jsonpython-3.xpandastwitterijson

Discover a faster way to access object properties suggestions in vscode similar to Chrome console

When using Chrome DevTools, selecting an element will display its corresponding properties and methods that can be accessed with a dot (.). However, in VSCode, this information may appear as gibberish. Is there a way to get the same suggestions as Chrome D ...

javascriptvisual-studio-code

If the variable is not defined, then utilize a different one

There are two scopes: $scope.job and $scope.jobs. I also have a variable called job; If $scope.job is undefined, I want $scope.jobs to be assigned to the job variable using the following code: var job = $scope.jobs. However, if $scope.job is defined, the ...

javascriptangularjs

Transforming jQuery script into AngularJS

I am currently working on a project with the Ionic framework that utilizes AngularJS. I am wondering if it is possible to rewrite the following code from jQuery to AngularJS? jQuery(function($) { var states = { 'USA': ['Arizona ...

javascriptjqueryangularjs