Improve the performance of your three.js project by utilizing JavaScript arrays instead of importing OBJ or GLTF files

I've noticed that loading OBJ/GLTF/GLB models into my three.js application can be time-consuming. On the other hand, declaring JavaScript arrays of vertices and indices with the same data and creating a new object is much quicker (and reduces file size). Is this a recommended practice? Are there strong arguments for why loading a 3D file format is preferable to using faster JavaScript arrays?

Answer №1

The disparity in data size between formats is noticeable. It seems that compression settings are optimized for "js arrays" but not for gltf or obj files.

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

A step-by-step guide to adding a checkbox column dynamically within handsontable

I am currently utilizing handsontable within a jsfiddle at http://jsfiddle.net/kc11/cb920ear/1/. My task involves dynamically inserting a checkbox column before the existing data. The structure I am working with appears to be a multidimensional array, as s ...

Is it recommended to rely on Javascript for altering the content of a div across an entire website?

I am in the process of creating my personal portfolio and have a few inquiries regarding the framework to implement. Currently, I have an index.html page that contains all the information I want displayed when visitors land on the site. Additionally, ther ...

What is the process for incorporating synchronous tasks within an asynchronous function?

const fs = require('fs') const readline = require('readline') const stream = require('stream') const rl = readline.createInterface({ input: fs.createReadStream('logs.txt') }) var uniqueItems = new Set() // ASY ...

Conceal the div element five seconds after the registration process is completed

Is it possible to automatically hide a div 5 seconds after a user registers? Using the timestamp in PHP for the user's registration, there may be a way to achieve this with jQuery, but it's not certain. I found a script online that successfully ...

Store a new JSON item in the localStorage

Currently, I am tackling a task in Angular where the objective is to store items to be purchased in localStorage before adding them to the cart. There are four distinct objects that users can add, and an item can be added multiple times. The rule is to ch ...

Is your pure function component not receiving or responding to input props correctly?

Here is my code snippet: const actionCreators = { action: AppReducer.actionCreators.action } interface GlobalState { user: Model.User | null; } interface InputState { setStashBarWidth(width: number); stashWidth: number; } const Header = ...

utilizing an ajax request to clear the contents of the div

When I click on Link1 Button, I want to use ajax to empty the contents in the products_list div <button type="w3-button">Link1</button> I need help with creating an ajax call that will clear the products in the product_list when the link1 but ...

How can I update the image source using Angular?

<div class="float-right"> <span class="language dashboard" data-toggle="dropdown"> <img class="current" src="us-flag.png" /> </span> <div class="dropdown dashboar ...

Disable Button's Shadow when it is in an active state (clicked)

Check out the DEMO to see the button animation CSS in action. The CSS code for the button animations is as follows: .btnliner { /* CSS properties */ } /* More CSS properties */ .btnliner:hover { /* Hover effects */ } Here is the corresponding J ...

Having trouble retrieving the desired information within the JSON format. What exactly is the discrepancy between the two sets of data?

I've researched extensively on similar issues but have not been able to find a solution. My goal is to retrieve the name and value of a coin. The Coinmarketcap API has 2 endpoints. The first endpoint, as indicated in the comment, provides the desired ...

Pause and continue scrolling through the page with the push of a button

I have a question about a simple demo. I am looking to prevent scrolling when button1 is clicked, and then resume scrolling when button2 is clicked. Can someone guide me on how to achieve this? Check out the Fiddle here HTML: <input type='button& ...

Utilizing THREE.JS Raycaster with JavaScript "entities" rather than just meshes

I am facing a challenge with the Raycaster model. I grasp the concept of how it intersects meshes that can be transformed, but my issue lies in identifying when the specific instance of an object is clicked. Consider a scenario where there is a button. Th ...

Pass data from Action Class to ajax using JSON syntax

Currently I am facing an issue while working on fullCalendar, a jQuery plugin. I am trying to populate event details from a database when the Calendar page loads, but I seem to be stuck with a silly problem that I can't figure out. $('#calendar& ...

React components to separate static PDF pages

I have successfully implemented a feature in my React App that allows me to export a long page in PDF format using html2canvas and jsPDF. The code snippet for exporting the page is as follows: html2canvas(document.body).then((canvas) => { var img ...

Troubleshooting a React Node.js Issue Related to API Integration

Recently, I started working on NodeJs and managed to create multiple APIs for my application. Everything was running smoothly until I encountered a strange issue - a new API that I added in the same file as the others is being called twice when accessed fr ...

Unable to retrieve data from the database within PHP code

I have successfully built a shopping cart website utilizing SQL, HTML, and PHP. Below is the code snippet for the 'Add to Cart' button: <form method="post" action="cart.php" class="form-inline"> <input type="hidden" value="&apos ...

How can I designate unreleased files as dynamic entries in a webpack configuration?

Here is the configuration for webpack.config.js: const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const fs = require('fs'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require(&apo ...

Avoid HTML code injection in an ExtJS4 grid by properly escaping the href attribute

I am facing an issue with escaping HTML in my Extjs grid. I have used the following configuration : return Ext.String.htmlEncode(value); In the renderer of my column, this method works perfectly for simple HTML tags like h1, b, i, etc. However, if I in ...

Changing the width of the file input using css

Clicking just below the word demonstration also triggers a click on the input type file. How can this be avoided so that the click event only fires in the intended area regardless of size? <!DOCTYPE html> <html> <body> <style> in ...

Saving dynamic text input values to the database using asynchronous communication with AJAX

PHP: foreach ($_POST['fields'] as $fieldIndex => $fieldValue) { $stmt = $dbconnect->prepare('INSERT INTO '); <<=== How to insert values $stmt->execute(); } JQuery: $("#add").click(functio ...