Synchronize cameras in Three.js for rendering textures

I am attempting to implement an alpha coloring filter on a point cloud, as outlined in this tutorial: , in order to create a heatmap effect.

Currently, I am rendering a 2D point cloud onto a texture and then displaying it on a plane using a custom shader that manages the colorize-alpha filtering.

The issue I am facing is figuring out how to zoom into the textured point cloud while maintaining the original size of the individual points within the cloud.

I have provided a simplified example demonstrating my render-to-texture setup, without actual colorize-alpha filtering: http://jsfiddle.net/q8fpt7eL/1/

The desired effect is to replicate the same visualization achieved when directly drawing the point cloud. In the provided jsfiddle, you can toggle between rendering to texture and rendering directly to observe the difference.

//render to texture
//renderer.render(sceneRTT, cameraRTT, rtTexture, false);
//renderer.render(scene, camera);

//render directly the point cloud
renderer.render(sceneRTT, camera);

I have attempted using the same camera settings and copying camera position/rotation to the cameraRTT object, but none of these methods seem to produce the intended result. I also experimented with an orthographic camera in the RTT scene, but encountered no success.

If anyone has any insights or suggestions on how I can achieve my objective, please share your thoughts.

Thank you!

Answer №1

Make sure to adjust the OrbitControls on line 41 to control the camera of the RTT scene instead of the "plane scene". Here's how:

new THREE.OrbitControls(cameraRTT, renderer.domElement);

With this change, you'll be able to zoom inside the point cloud more smoothly.

Finally, don't forget to set camera to orthographic and configure your plane to fill the entire scene.

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

What is the best way to save the output of an asynchronous (AJAX) function in a variable?

This isn't a repeat query. I'm seeking assistance in locating a technical solution that hasn't been covered in the post How do I return the response from an asynchronous call? If .then() doesn't resolve the Promise, how can I pinpoint ...

Having trouble with jQuery find and attribute selectors?

On my webpage, there is a form where: The command $('form').find('input[type=submit]') returns [undefined] However, using $('form input[type=submit]') works correctly... Is this behavior expected? ...

How can I display a Bootstrap modal in Ember.js after rendering it in an outlet?

I'm facing a challenge in my Ember.js application where I need to trigger the opening of a Bootstrap modal from my ApplicationRoute upon calling the openModal action. This is what my ApplicationRoute looks like: module.exports = Em.Route.extend({ ...

A guide to accessing a property value in Angular 6 from an object using a string key

In my Angular application, I am receiving an object with multiple arrays from a REST service. I need to access the value from the incoming object based on the property name. Here is what the object looks like: data{ array1:{}, array2:{}, array3:{} } Th ...

Discovering React Flowtype's Node.contains() event target

In my React code, I have set up an event listener like this: document.removeEventListener("mouseup", this.handleDocumentClick); I found the definition of the method in Flow's source code, and it looks like this: removeEventListener(type: MouseEvent ...

This method or property is not supported by the object - How to call an Applet in Internet Explorer 9

cmd > java -version Java Version : "1.7.0_11" (Updated) Java(TM) SE Runtime Environment (build 1.7.0_11-b21) Java HotSpot(TM) Client VM (build 23.6-b04, mixed mode, sharing) browsers = IE7,IE8,IE9 (The functionality works smoothly in Google Chrome and ...

"Syncing Ajax requests with JSON in synchronous mode is not functioning properly when async is

The problem I am facing is with synchronous ajax: var result = false; $.ajax({ async: false, url: url, dataType: "json", success: function(data) { ...

Enhance the Material UI Data Grid by customizing the toolbar's default slots with the option to disable the

https://i.stack.imgur.com/0YV9m.png Background In my current project, I am utilizing the Datagrid component from MUI [email protected]. I have disabled the column menu to display the toolbar at the top of the table instead of on individual columns. ...

Is there a way to create a dynamic CSS class without relying on the use of IDs?

Is there a way to create a dynamic CSS class without using an ID? $( "#mydiv" ).css( "width", $("#widthtextbox").val() ); $( "#mydiv" ).css( "height", $("#heighttextbox").val() ); I am looking to implement multiple CSS classes for this task. ...

Encountering an issue in Angular 8 where there is a difficulty in reading the property 'NODE_NDEBUG' when attempting to serve the application

An issue has been identified in the assert-plus library at ../node_modules/assert-plus/assert.js where it is encountering difficulties reading 'NODE_NDEBUG' from 'process.env', as highlighted in the code snippet below module.exports = ...

Stop the window from scrolling up smoothly when opening a custom modal to avoid any flickering

I encountered a problem with a custom modal window that would open on click and move to the top of the viewport. The issue was that when scrolling up, the page beneath would be visible, so I needed to restrict scrolling once the modal was open. Below is th ...

Concealing Content within an Accordion

Looking for some guidance on setting up a mobile version of my product image with hover features. Currently using tooltips on desktop and planning to use a modified accordion on mobile, but struggling to make progress. Customized some JS to toggle an acco ...

Initiating preparation during NPM Installation

During the installation of a TypeScript module from Git, I noticed that the package.json file contains a prepare script in its scripts section. Strangely, it seems that the prepare script is not being run when using npm install <git repository#version&g ...

Customizing AngularJS Scripts to Include Target Blank

I'm feeling a bit lost. I need to include a target="_blank" on my anchor link. The issue is that the anchor tag is linked to a script in angular. I am not familiar with this JavaScript framework. I have tried searching through the documentation for po ...

Switching Json to Typescript

I have a file named items.ts with the following interface: export interface item{ Name: string; IsSystemItem: string; ConfiguredSegments: ConfiguredSegments; } export interface ConfiguredSegments { LiveA: LiveA; } export interface LiveA { Weig ...

How to obtain the full path of a file downloaded using a Chrome extension

Currently in the process of creating a chrome extension that has the functionality to download specific files from various webpages. For this purpose, I have designed a popup.html where users can input the desired name for the file to be downloaded. Additi ...

Is it possible to pass a JSON file as a JavaScript object in Express using Node.js?

When attempting to import a JSON file into my code using the line below, I am encountering an issue where the jsonConfig variable is being populated with a JavaScript object instead of the expected config file. This allows me to directly access jsonConfi ...

Getting a result from a Node.js function that includes a database query

Currently, I am diving into the world of Node.js and delving into working with MySQL connections. There is a particular function that should retrieve a set of rows from the database successfully. However, after retrieving these rows, I am unsure of how to ...

The skybox boxgeometry fails to appear on the screen, leaving only a blank black display

I'm currently working on a three.js code that involves creating a skybox using a cube with different pictures on each side. However, when I run the file, instead of seeing the cube with the images, all I get is a black screen. I suspect that the issu ...

Tallying elements within a nested array using Angular

I'm just starting with Angular and I'm struggling to figure out how to count all the results from a filtered array. The issue is that the data I need to filter is nested within a second-level array. I've searched for solutions on Stack Overf ...