How can I change the colors of points on a 3D scatter plot using Three.js as I zoom in?

Seeking assistance with a project involving displaying a 3D point cloud containing approximately 200K points, akin to the image provided below, complete with a colorbar.

https://i.sstatic.net/L6ho0.png

We are looking to dynamically update the colorbar when users zoom in, adjusting it to match the new minimum and maximum values of the visible points for enhanced detail visibility.

To achieve this, we need to determine the new range of visible points, recalculate the color values accordingly, and apply them without causing lag, ideally leveraging three.js GPU functions rather than traditional JS iteration.

Key inquiries include:

  • Is there an event or method to identify points that remain visible after user interaction?
  • What is the most efficient approach to determining the updated minimum and maximum values of visible points?
  • Can colors be adjusted for points without resorting to manual JS iteration?
javascriptd3.jsthree.js

Answer №1

Is there a way to maintain visibility of points without any specific event triggering that?

No, currently there isn't an event dedicated to keeping the points visible. The solution would involve iterating through each point to determine if it falls within the camera's view frustum.

What is the most efficient method for finding the minimum and maximum values of points visible after user interaction?

To identify the min/max values of visible points post-user interaction, you'll need to loop through all the points and track the minimum and maximum values accordingly.

Are there alternative approaches to adjusting the colors of points in JavaScript without resorting to iteration?

If you have prior knowledge of the minimum and maximum values, you can send them as uniforms to the shaders and leverage them to update the color attributes of the vertices/points.

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

Error: The property 'match' is undefined and cannot be read by Object.j during rendering in angular-datatables.min.js at line 6

I am currently using angular-datatables.min.js for my data table, but I have encountered an error that I have been unable to resolve. Is there anyone who can provide assistance with this issue? App.controller('DailyTaskListController', ['$s ...

javascriptjqueryajaxangularjsdatatables

Unable to retrieve the value stored in the global variable

I recently updated my code to use global variables for two select elements in order to simplify things. Previously, I had separate variables for values and innerHTML which felt redundant. Now, with global variables like user and group initialized at docum ...

javascriptjqueryvariables

Is there a way to stop myself from accidentally clicking twice on the same tile?

I'm currently working on a game and facing an issue where my "X" gets deleted when clicking twice on the same tile. I am able to move my "X" around, but the double-click deletion is causing trouble. I attempted using booleans but struggle with them. I ...

javascripthtmlcss

What is the best way to simulate DynamoDB promise functionality with Jest?

Looking for a solution without using any libraries (as they haven't worked in my case). How can I make it work for that promise returned by the dynamodb query? Check out the code to be tested below: const isUrl = require('is-url'); const ...

javascriptexpressjestjsamazon-dynamodb

Break down objects into arrays of objects in JavaScript

Hello, I'm struggling with transforming this object into an array of objects. The 'number' and 'reason' fields are currently stored as strings separated by commas. I need to split them into their own separate objects. The example ...

javascriptarrayssplit

Retrieve the keys stored within a complex array of objects

I am searching for a function that can transform my data, specifically an array of objects with nested objects. The function should only include keys with immediate string/number/boolean values and exclude keys with object/array values. For example: [ { ...

javascriptreactjs

Using jQuery to target the element before

Is there a way to determine the width of elements located before an element when it is hovered over? I attempted to achieve this using the following code: $('ul li').hover(function() { $(this).prevAll().each(function() { var margin = $(this ...

javascriptjqueryhtmlcss

Having trouble getting Firebase phone number authentication to work with Vue.js

I am currently in the process of developing a new Vue.js application using the Webpack template. Within this app, I have implemented a /sign-in route that displays a component named SignIn. To authenticate users, I am utilizing Firebase Phone Number authen ...

javascriptfirebasevue.jsfirebase-authentication

A guide on displaying a text file from a URL in a reactjs application

When utilizing the code provided below, I have successfully managed to display the content of a local text file on a webpage. However, when attempting to render a text file from a URL, the state becomes null resulting in an empty display. In order to ren ...

javascriptreactjs

Manipulating viewport settings to simulate smaller screens on a desktop device

I am working with a parent container that contains Bootstrap div.row elements holding div.col-... child elements. I am using jQuery to adjust the width and height of the container dynamically to replicate mobile device sizes for users to preview different ...

javascriptjquerytwitter-bootstrapmedia-queriesviewport

What is the proper way to showcase the hover effect on a nested ul list item in the DOM?

In an attempt to create a menu, I have written the following code: var sheet_nav = document.createElement('style'); sheet_nav.innerHTML = "nav{ margin: 100px auto; text-align: center;}"; document.head.appendChild(sheet_nav); var sheet_nav_ul = ...

javascripthtmlcssonmouseoveronmouseout

Guide on inserting a dropdown menu following a specific count of <li> elements using Javascript or Jquery

I am currently working on an HTML project <div class="ktmsg"> <ul> <li class="a1"> <a title="Link Tools" href="#"> … </a> </li> <li class="a2"> <a title="Link Tools" href="#"> ...

javascriptjqueryhtmlcss

Encountering obstacles when attempting to save form information to a MongoDB database using Node.js

I've been struggling to save the data entered in my form to my database, but it's not working at all. No errors are showing up and nothing is being logged. Here's the HTML code I'm using: <!DOCTYPE html> <html lang="en"> & ...

javascriptnode.jshtmlmongodbbootstrap-4

The functionality of Ajax autocomplete with jQuery does not function properly when the text field contains existing text

Currently, I am utilizing Ajax autocomplete for jquery in my project. Below is the HTML code snippet I have implemented: <input type="text" name="autocomplete" id="globalBCCAutoComplete"> Furthermore, here is the JS code utilized for the autocomple ...

javascriptjqueryhtmlajaxautocomplete

Best practices for managing non-PrivateRoutes in React

In my app.js, I have set up a PrivateRoute that requires user login and only grants access if the cookie is set. However, I want to prevent users from accessing /login after they have logged in successfully. To achieve this, I implemented a LoginRoute wi ...

javascriptreactjsreact-router

The byte order of integer literals in JavaScript

When writing the following line in Javascript: var n = 0x1234, is it always true that n == 4660? This question could also be phrased as follows: Does 0x1234 represent a series of bytes with 0x12 as the first byte and 0x34 as the last byte? Or does 0x1234 r ...

javascriptintegerendiannessliterals

jQuery Slider not appearing on the page

I am attempting to incorporate the Basic jQuery Slider into my website. Below is the code I have used: For HTML file: <div id="slides"> <ul class="bjqs"> <li><a href="somelink"><img src="someim ...

javascriptjqueryhtmlcss

List the properties that the arguments object supports

During a NodeJS interview, I was presented with the following question: What properties are supported by the arguments object? a) caller b) callee c) length d) All Upon researching, I discovered that all 3 mentioned properties are supposed to be present ...

javascriptnode.js

Include the aria-labelledby attribute in the jQuery Datatable Pagination

Check out the HTML output created by the Jquery Datatable plug-in for pagination(https://datatables.net/plug-ins/pagination/full_numbers_no_ellipses): <div class="dataTables_paginate paging_full_numbers" id="my-table_paginate" aria-l ...

javascriptjquerydatatables

Upon refreshing the page, next.js 13's useSession() function fails to fetch session information

Currently, I am working on replicating an ecommerce site using nextjs 13. On the order page, I am utilizing useSession from next-auth/react to check if a user is signed in or not. Everything works fine when I navigate to the page through a link, but if I r ...

javascriptnode.jsnext.jsnext-authnext.js13