Three.js performance degrades when dealing with a large number of objects

Currently, I am facing performance issues while creating over 12,000 BoxHelpers. The loading and navigating processes are extremely slow. I am seeking advice on a more efficient approach.

This is the code snippet that I am using:

    
var c=[];
c.push([-100,15,285]);
c.push([0,25.5,285]);
c.push([0,51,285]);
c.push([0,76.5,285]);
c.push([0,0,297]);
c.push([0,25.5,297]);
c.push([0,51,297]);

Note: This is just an example, as the actual data is retrieved from JSON.


var cubeGeometry = new THREE.CubeGeometry(10, 24.5, 12);

for (var i in c) {
    var cube = new THREE.BoxHelper();
    cube.material.color.set(0x6666FF);
    cube.scale.set(5, 12, 6);
    cube.position.set(c[i][0], c[i][1], c[i][2]);
    scene.add(cube);
}

I am considering building the entire structure beforehand and then adding it to the scene. However, I am unsure of how to proceed with this approach.

Answer №1

Are you interested in constructing a structure using numerous objects?

If my understanding is correct: - Construct the structure in Blender and then import it, or - Build the structure using a single geometry with thousands of vertices and faces

Could you please provide a sample code on jsfiddle for reference?

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

When I set the width of my script to 100% in CSS, it causes the width to become distorted

I encountered an issue with my Div Slider that swaps out Divs on click. When I modified the CSS to include the following: .hslide-item {width: 100%}; The script started ignoring the entire div width. I am looking for a solution where the .hslide-item ca ...

Troubleshooting a Safari bug with element.click()

When the 'subButton2' button is clicked, the 'uploadBtn'(display:none;) should also be clicked. This functionality needs to work across different browsers: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_html_click The cod ...

Managing arrayBuffer in hapi.js: A Comprehensive Guide

I am struggling to upload an arrayBuffer to my server and save it to a file. On the client side, I am using axios, and on the server side, I have implemented Hapi js. However, I am facing difficulties in extracting data from the request in the Hapi handler ...

Removing an item from an array within subdocuments when a nested id is located

{ "_id" : ObjectId("55a4b23636e6ba35079eb497"), "userName" : "David", "email" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e28683948b86a2858f838b8ecc818d8f">[email protected]</a>", "image" : " ...

Execute the extension exclusively within iframes

I'm developing a browser extension and I need certain parts of the code to only execute within iframes. Currently, all the code in my extension.js file is executed on both regular web pages and iframes. How can I identify whether the code is running w ...

how to assign a value to a field automatically in PHP

Is it possible to send values such as name, email, and contact number from one URL like to another URL at ? I would like these values to be automatically displayed on the form of the target URL (http://www.otherurl.com/test.php). I do not have access to ...

What is the best way to integrate ngx-translate's pipe for global translation?

I'm currently utilizing the ngx-translate package in order to internationalize my Angular application. When translating text using the translate pipe like so: {{ 'title' | translate }} An issue arises when attempting to use this pipe in ot ...

Calculate the total cost for each row in a table by multiplying the quantity and price using jQuery, then display the result

I'm encountering an issue with my table row calculations involving price and quantity. The calculation results show up correctly in the console, but when I try to display them back on the table, the total sum of the first row gets duplicated into all ...

The implementation of a Like Button in Django using JS and DOM resulted in a 404 error

I am facing an issue with the 'live' like/unlike button functionality in Django and JavaScript DOM Upon clicking the button, an error is triggered POST http://127.0.0.1:8000/like/24 404 (Not Found) likePost @ javascripts.js:24 (anonymous) @ java ...

After updating to version 0.10.10, Visual Studio Code no longer recognizes JavaScript syntax highlighting

Can anyone help me with this issue? I have attached a screenshot for reference. Any assistance would be greatly appreciated. https://i.sstatic.net/3cjKc.png ...

Using Vercel for a Next.js Custom Directory Configuration

Seeking guidance on deploying Next.js with Vercel, I have made changes to the structure of my Next.js project: frontend (Current Directory for Next.js) node_modules next.config.js jsconfig.json package-lock.json package.json Contents of package.json scri ...

Naming convention for callback parameters

Exploring a basic node.js code snippet: var fs = require("fs"); fs.readFile('input.txt', function(err, data){ if(err) console.log(err.toString()); console.log(data.toString()); }); console.log('End of the program'); How d ...

How to Use Framer Motion in Next.js for window.innerWidth Less Than 768

I am trying to use window.innerWidth to control the timing of an animation (Framer Motion) in my Next.js project, but I keep encountering the error message: ReferenceError: window is not defined Here's a simplified version of my ValuesSection.jsx co ...

How can you utilize the Array submission syntax within HTML coding?

I currently have numerous input fields within a form, and some of them are structured like this: <input name="agents[]" type="file" /> Additionally, imagine there is a plus button next to this field as shown below: <img src="plus.jpg" id="some_ ...

What is the reason for the inclusion of [Circular] in the hash?

Below is the code snippet: db.query(str, arr, function selectCb(error, results, fields) { if (error) { return proceed(false, {errno:'010',message:error.message}, request); } var q = async.queue ...

Retrieve the response status using a promise

There is a promise in my code that sometimes results in an error response (either 400 or 403, depending on the user). I am trying to handle this situation by catching the response and implementing a conditional logic to execute different functions based on ...

Adjust the size of the mat-expansion indicator to your desired height and width

Trying to modify the width and height of the mat indicator has been a bit challenging. Despite following suggestions from other similar questions, such as adjusting the border width and padding, I am still unable to see the changes reflect in my CSS file ...

Issue with AJAX/JavaScript causing an alert to not pop up

I am currently studying AJAX/JS and have set up a form submission that triggers an AJAX POST request to retrieve data. The data is returned successfully, however, I am facing an issue with displaying an 'alert' message. Instead of showing the ale ...

Integrating Three Js legacy code into a Vue page component: Step-by-step guide

Is there a way to incorporate legacy Three Js code into a Vue Js page component without utilizing Vue methods or computed objects, similar to plain javascript included via an html script tag? I am working with node 10.14, Vue-cli 3, and Vue scaffold. ...

Vue throwing ReferenceError when accessing uninitialized variable in Safari browser

Recently, I've encountered a perplexing error message that has me scratching my head. The error message reads as follows: ReferenceError: Cannot access uninitialized variable. This error specifically points to the line of code: const app = createApp(A ...