Maximizing the efficiency of threejs through combining and selecting items

In my exploration of three.js optimization, I discovered that reducing the number of draw calls is crucial for improving performance. One way to achieve this is by consolidating geometries through the use of GeometryUtils.merge.

Although this optimization technique helps with performance, one drawback is the inability to individually select merged geometries using raycasting. While I grasp the rationale behind this limitation, I am curious if there are alternative methods that enable the selection of individual geometries post-merging?

Answer №1

One way to optimize performance is by maintaining two separate sets of geometries. One set would be merged for rendering purposes, while the other set would remain unmerged for raycasting. By raycasting on the unrendered geometry, you can save memory and improve efficiency. This method is ideal for scenarios where memory is not a major concern, but the number of objects is high.
Alternatively, a more complex approach would involve creating an index that links faces to their original geometries.

Answer №2

In this illustration, we demonstrate the process of altering the color of a selected face on a sphere geometry. For more information, you can visit the following link:

Are you finding this explanation helpful? What specific actions are you looking to perform on the chosen geometry object?

/update: Upon further reflection, it seems that the solution provided may not be suitable as you intend to perform raycasting on an entire geometry object rather than individual faces.

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

I'm working on an Angular2 project and I'm looking for a way to concatenate all my JavaScript files that were created from TypeScript in Gulp and then include them in my index

How can I concatenate all JavaScript files generated from typescript in my Angular2 project with Gulp, and then add them to my index.html file? I am using Angular2, typescript, and gulp, but currently, I am not concatenating the javascript files it genera ...

User creation causing redirection malfunction

Recently, while working on a website, I encountered an issue with the registration process for users. It was functioning properly when I tested it a few days ago. After making some updates to other aspects of the website such as the login and profile sect ...

The file size exceeds the server's upload limit, despite making changes to the php.ini file

I've encountered a problem trying to upload an .OBJ file to the server, resulting in an 'Error 1' message. The uploaded file surpasses the upload_max_filesize directive specified in php.ini This error is detailed on this page - http://ph ...

Issue with setting multiple checkboxes in AG Grid

I have a situation where I am trying to select multiple checkboxes on different rows in my application. Each time I click on one checkbox, it gets selected just fine. However, when I click on another checkbox in a different row, the previously selected che ...

guaranteed function to retrieve React elements

Is there a solution for the issue where if-else doesn't work in run build but works in run dev? The only way I've found to make it work is by using a react hook, but I'm unsure which one to use and where to implement it. import { useAdd ...

Display a preview image at the conclusion of a YouTube video

I am currently working on an iOS device and have a Youtube video thumbnail that, when clicked, disappears and the video automatically plays in fullscreen mode using an iframe. It's working perfectly. Now, I would like to know how I can make the thumb ...

Error: It appears that there is an issue with asynchronous operations causing a TypeError when trying to read the 'source' property of an undefined

As I delve into the world of JavaScript, I've decided to create my own ecommerce shop. However, as I attempt to preview the page locally, a frustrating error greets me: TypeError: Cannot read properties of undefined (reading 'source') Let&a ...

Tips for choosing and emphasizing specific lines in a dxf document with the help of three.js, dxf-parser, and three-dxf

Incorporating both the dxf-parser and three-dxf libraries, I am working on a webpage to display dxf drawings with the help of the three.js library. Although I was successful in loading the dxf file onto the webpage, I encountered difficulties in highligh ...

The error message "angularjs is unable to assign a value to the property 'students' as it is

After setting ClassesServices to the classes array, I tried adding students of the class to a new property called classes.students. However, I encountered an error message saying 'Cannot set property 'students' of undefined.' $scope.cl ...

What could be causing the issue with my Angular integration with Jira Issue Collector to not function properly?

Looking to link the Jira issue collector with an Angular application I attempted something along the lines of Component.ts import { Component, OnInit } from '@angular/core'; import * as jQuery from 'jquery'; declare global { inter ...

Is there a way to substitute the HOC with a single call and solely modify the prop?

One issue I've encountered in my project is the repetitive use of a Higher Order Component (HOC) for the header. Each time it's used, the props are set to determine whether header links should be displayed or not. My objective is to streamline th ...

Tips on how to hold off the display of webpage content until all elements, including scripts and styles, have fully loaded

I have a variety of div elements set up like this - <div id='1' class='divs_nav'>My Dynamic Content</div> <div id='2' class='divs_nav'>My Dynamic Content</div> ... <div id='149' c ...

Arranging the columns of a matrix

My dilemma involves a matrix (or multidimensional array) filled with non-unique values, similar to this example: var matrix = [ [1, 3, 2, 4, 1], [2, 4, 1, 3, 2], [4, 3, 2, 1, 4] ] I am in need ...

What steps can be taken to ensure Vue application admin page contents are not displayed without proper authentication?

By implementing role-based authentication in Vue app, we can efficiently manage routes and components visibility between regular users and administrators. As the number of roles increases, the application size grows, making it challenging to control CRUD ...

State variable in Redux is not defined

While there have been numerous similar inquiries on this platform, I haven't been able to find a solution to my particular issue. Below is the React component in question: class MyTransitPage extends Component { componentDidMount() { this.pro ...

Empty results received from MongoDB queries executed within an asynchronous loop

I'm encountering an issue where I have a list of IDs that I need to query Mongo with in a for loop, but it always returns an empty []. Initially, the queries were returning promises, so I switched from using forEach to a standard for loop as shown her ...

Experiencing issues with implementing shopping cart logic using KnockoutJS. Need help

The Objective Create a dynamic list of products. The Scenario Overview In my online shopping application, I want to showcase the products I add to my shopping list in a sidebar when I click the 'add button' for each product. Brief Problem Sum ...

an all-encompassing loading animation designed specifically for updates to location.href

We have a situation where a customer's website is displaying extremely slowly within an iFrame, taking about 7 seconds to load. All we can do is provide the customer with a JavaScript file for inclusion on their site, as they are not willing to make a ...

The optimal method for loading CSS and Javascript from an ajax response within a JavaScript function - Ensuring cross-browser compatibility

I am in a situation where I need jQuery to make sense of an ajax response, but due to latency reasons, I cannot load jQuery on page load. My goal is to be able to dynamically load javascipt and css whenever this ajax call is made. After reading numerous a ...

Utilizing an NPM package in your project

Trying to incorporate a node module called "tagify" into my node.js application has been challenging. Following the instructions in the package's readme file (https://www.npmjs.com/package/@yaireo/tagify#installation), I executed the setup steps as ou ...