Using Three.js to showcase 3 different slices of heatmaps within a 3D environment

I'm working on using Three.js to create a 3D representation of a matrix. Each 2D plane in the matrix should be displayed as a 2D heatmap. Here is an example of what I'm aiming for:

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

My current obstacle is figuring out the most efficient way to visualize this in Three.js. I have tried drawing each cell of the heatmap individually as a square and coloring it. However, the performance starts to decrease significantly when working with very large matrices, for example, 100000 * 500 * 200.

While I am new to 3D programming and Three.js, I have looked into examples that suggest Three.js can handle large datasets using particle systems. I'm unsure of how to implement this effectively and some of the existing examples I found do not work with the latest version of Three.js.

Additional features I need to incorporate include the ability for users to zoom, rotate, and pan across the visualization.

A great reference I came across is . It showcases a lengthy data sequence visualized at the end of the song, allowing users to rotate the view to see the entire sequence.

To summarize, I am seeking advice on the best techniques within Three.js to visualize a heatmap representation of a matrix, especially when dealing with large datasets.

Thank you.

javascript3dthree.js

Answer №1

Upon reviewing a few examples, it appears that utilizing THREE.Points created by a BufferGeometry and a PointsMaterial is enough to display the heatmaps.

const PARTICLE_SIZE = 15;
const geometry = new THREE.BufferGeometry();
const material = new THREE.PointsMaterial({
    size: PARTICLE_SIZE,
    vertexColors: THREE.VertexColors
});

const rowNumber = 200, columnNumber = 10000;
const particleNumber = rowNumber * columnNumber;
const positions = new Float32Array(particleNumber * 3);
const colors = new Float32Array(particleNumber * 3);
for (let i = 0; i < rowNumber; ++i) {
    for (let j = 0; j < columnNumber; ++j) {
        const index = (i * columnNumber + j) * 3;

        // positioning vertices on the XY plane
        positions[index] = i * PARTICLE_SIZE;
        positions[index + 1] = j * PARTICLE_SIZE;
        positions[index + 2] = 0;

        // using random colors for now
        colors[index] = Math.random();
        colors[index + 1] = Math.random();
        colors[index + 2] = Math.random();
    }
}
// attributes for rendering particles
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
const particles = new THREE.Points(geometry, material);
scene.add(particles);

I found a helpful example during my research.

One issue that remains unresolved is that all particles constantly face the camera. This means when the heatmap is rotated, the particles always face the viewer, changing the overall orientation of the plane. I will update once I find a solution.

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

Determine the DOM element that corresponds to a right-click action

I utilized the code snippet below to construct a personalized context menu: <script type="text/javascript"> $(document).ready(function() { var x, y; document.oncontextmenu = function(e) { e.preventDefault(); x = e.clientX; ...

javascriptjqueryhtmlcontextmenu

The hyperlink function is not operational in Gmail attachments

Using an anchor tag to navigate to a specific section within the same page works perfectly when the HTML file is on my local machine. However, when I attach the file in Gmail and open the attachment, it doesn't work. Why is this happening? How can I m ...

javascripthtmlcss

Gatsby is throwing an error because the location props are not defined

I am attempting to utilize location props in my Gatsby page. In pages/index.js, I am passing props within my Link: <Link state={{eventID: event.id}} to={`/date/${event.name}`}> </Link> In pages/date/[dateId]/index.js: const DateWithId = ( ...

javascriptreactjsgatsby

What steps do I need to follow to create a 3D shooting game using HTML5 Canvas?

I'm eager to create a 3D shooter game with HTML5 Canvas, focusing solely on shooting mechanics without any movement. Can anyone provide guidance on how to accomplish this? I've looked for tutorials online, but haven't come across any that m ...

javascripthtmlcanvas

Updating NPM packages versions is currently restricted

I'm in the process of creating a Next.JS application using create-next-app. However, I've noticed that in the package.json file it lists the following dependencies: "eslint": "8.43.0", "eslint-config-next": &quo ...

javascriptnode.jsnpmnext.js

Issues with ng-click functionality in MVC partial view

I am currently working on a single page application that utilizes angular.js and MVC. Within the application, there are two partial views being called: Menu Accounts The Menu partial view loads successfully. However, I am encountering an issue with the ...

javascriptjqueryangularjsasp.net-mvcasp.net-mvc-4

Adjust the color of the input range slider using javascript

Is there a way to modify the color of my slider using <input type="range" id="input"> I attempted changing it with color, background-color, and bg-color but none seem to work... UPDATE: I am looking to alter it with javascript. Maybe something al ...

javascriptcsshtml

Tips for wiping clean and restarting data in a modal?

After closing and reopening this modal, both the old information and new data remain. I aim to reset everything within the modal, wiping out details from both the header and body. Expected scenario - https://i.sstatic.net/Z42Rk.png Actual situation - http ...

javascriptjqueryhtmlruby-on-rails

The challenge of loading multiple objects asynchronously in three.js

When I try to load multiple models onto the same scene simultaneously, only one model is successfully loaded. For instance, if I have a building scene with various objects like chairs and toys inside, only one object gets loaded when I try to load them all ...

javascriptjqueryasynchronousthree.js

Responsive design with Flexbox, interactive graphics using canvas, and dynamic content resizing

I'm having difficulties with my canvas-based application. I have multiple canvases, each wrapped in a div container alongside other content. These containers are then wrapped in an "hbox" container. The objective is to create a dynamic grid of canvas ...

javascriptcsshtmlcanvasflexbox

Utilizing @Material-UI Tabs for a Stylish Navigation Bar

As a newcomer to the coding realm, I find myself on a quest for an answer that has proven elusive. Despite scouring various sources, none of the solutions I've stumbled upon seem to work in my case. The issue at hand revolves around my desire to util ...

javascriptreactjsnavigationnavbarmaterial-ui

Error encountered in jQuery's addClass and removeClass functions: Unable to read the property 'length' of an undefined value

Upon loading my page, I aim to have some of the div elements hidden initially and display only one. Here is a script that accomplishes this goal: <script> $(document).ready(function () { $(".total").click(function () { $("#pi ...

javascriptjqueryhtmlcss

Headers and data organization in Angular 2

I'm searching for a simple Angular 2 example that demonstrates how to fetch both the headers and data from a JSON API feed. While there are plenty of examples available for fetching data only, I haven't been able to find any that show how to retr ...

javascriptjsonangular

What order should jquery files be included in?

Today I ran into an issue while trying to add datepicker() to my page. After downloading jqueryui, I added the scripts in the following order: <script type="text/javascript" src="js/jquery.js"></script> <script src="js/superfish.js">< ...

javascriptjqueryhtmlajaxjquery-ui

A guide to displaying API response data in a React JS application

As a beginner in react JS, I've encountered a persistent issue. Here is the code: import React from 'react'; class SearchForm extends React.Component { async handleSubmit(event){ event.preventDefault(); try{ const url ='/jobs/ ...

javascriptjsonreactjsapi

Ways to dynamically assign value to a checkbox using jquery

var sites = sites_str.split(","); $.each(sites,function(i,j) { $('.check').append("<input type=checkbox name=site_name value=sites[i]>"+sites[i] +"</br>" }) I am facing an issue when trying to retrieve the values of selected check ...

javascriptjquery

Refresh all fields for various products with a single click of a button

Our Magento multi-vendor site allows vendors to easily manage their products. For each single product, vendors can view and update information such as price, selling price, quantity, and more from their vendor account. We have implemented a feature where ...

javascriptphphtmlmagento

Effective techniques for unit testing in Vue.js

Here's a question that's been on my mind: when it comes to unit testing in Vue.js, there are several different packages available. Vue Test Utils Vue Jest Vue Cypress For enterprise projects, which of these options would be considered best ...

javascriptvue.jsvuejs2vue-cli-3vue-test-utils

Node.js: Changing binary information into a readable string

I'm faced with a challenge - the code I wrote seems to be returning data in binary format. How can I convert this into a string? fs.readFile('C:/test.prn', function (err, data) { bufferString = data.toString(); bufferStringSplit = buff ...

javascriptnode.js

When using ThreeJS Raycaster, it may not detect intersected objects unless the canvas is in full screen mode

I've used ThreeJS to create a scene containing multiple objects on the canvas element. My goal now is to allow users to change the color of an object by clicking on it. https://i.sstatic.net/Rx8M3.png This snippet shows part of my Angular 5 componen ...

three.js