How can I create a fading trail effect in Three.js that diminishes over time?

I am interested in achieving a similar effect to the example I found on this website:

However, my goal is to have the old trail gradually fade into the background over time instead of cluttering the screen with persistent marks.

I discovered that by using the following code, you can draw over previous frames without clearing them:

renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
renderer.autoClearColor = false;

Although, I am unsure about how to implement the fading effect where each frame transitions smoothly into the background as new frames are added. It seems like applying a semi-transparent color over the screen might work, but I need guidance on how to execute that effectively.

javascriptthree.js

Answer №1

Check out this new demonstration featuring the postprocessing EffectComposer and AfterImagePass in action.

Click here to view the demo

Answer №2

To enhance your scene, consider incorporating a subtle technique by introducing a semi-transparent black plane directly in front of the camera:

// Create a highly transparent plane
var fadeMaterial = new THREE.MeshBasicMaterial({
    color: 0x000000,
    transparent: true,
    opacity: 0.01
});
var fadePlane = new THREE.PlaneBufferGeometry(1, 1);
var fadeMesh = new THREE.Mesh(fadePlane, fadeMaterial);

// Form an Object3D to house the camera and transparent plane
var camGroup = new THREE.Object3D();
var camera = new THREE.PerspectiveCamera();
camGroup.add(camera);
camGroup.add(fadeMesh);

// Position the plane in front of the camera
fadeMesh.position.z = -0.1;

// Arrange for the plane to render before particles
fadeMesh.renderOrder = -1;

// Incorporate camGroup into the scene
scene.add(camGroup);

By implementing this approach, each time the scene is rendered, it will gradually fade the previously displayed particles to black. Adjust the opacity of fadeMaterial and position of fadeMesh to achieve your desired visual effect.

The utilization of renderOrder = -1; guarantees that the plane renders first (fading out older particles) before rendering the particles themselves, preventing the newer ones from being obstructed.

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 reason behind an Express function requiring both the Request and Response as parameters?

Exploring the world of node.js and familiarizing myself with Express. The code snippet below has left me puzzled: var server = http.createServer(handleRequest); function handleRequest(req, res) { var path = req.url; switch (path) { case "/n": ...

javascriptnode.jshttpexpress

Creating a hexagonal grid pattern with the use of texture

I have conducted several experiments in the past to determine the most effective way to create large-scale hexagon grids. I attempted drawing the hexagons using THREE.Line and THREE.LineSegments. While this method was successful for small grids, the perfo ...

javascriptthree.jshexagonal-tiles

Accessing a PDF document from a local directory through an HTML interface for offline viewing

As I work on developing an offline interface, I'm encountering an issue with displaying a PDF file when clicking on an image. Unfortunately, the code I have in place isn't working as intended. Can someone please assist me with this problem? Below ...

javascripthtml

What is the best way to deal with empty arrays during serialization of modified form elements only?

Managing a form with numerous multi-select fields can be challenging, especially when dealing with paged ajax. With each select having a unique ID and named accordingly as values[foobar1][], values[foobar2][], values[foobar3][], and so on, it's crucia ...

javascriptphpjqueryarraysajax

Retrieve solely the text content from a JavaScript object

Is there a way to extract only the values associated with each key in the following object? const params = [{"title":"How to code","author":"samuel","category":"categoery","body":"this is the body"}] I'm struggling to figure out how to achieve this. ...

javascriptarraysjson

The compatibility between Babel 7 and the preset-es2015 is not very reliable

After reading this useful tutorial on implementing server-side rendering with create-react-app, I attempted to execute the following code snippet: require('ignore-styles'); require('babel-register')({ ignore: [/(node_modules)/], ...

javascriptreactjswebpackbabeljscreate-react-app

Comparison of various nodejs scripts

Snippet One net.createServer(function(socket){ socket.on('data',function(id){ getUserDetails(function(){console.log(id)}); }); }); function getUserDetails(next){ next(); } Snippet Two net.createServer(function(socket){ ...

javascriptnode.jsclosures

CSS styling doesn't take effect until the page is reloaded due to the failure of cssText

After generating a new list item, it appears that the CSS styling is not being inherited until the page is reloaded. Even though I have added styling using cssText dynamically, it doesn't seem to be working as expected. I've attempted using cssT ...

javascriptcss

Is there a way to maintain scroll position on a dynamically refreshing div?

After searching for hours, I still can't find a solution to my problem. I am using a simple JQuery script to refresh a div and display my PHP output in it. $script = " <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery ...

javascripthtmlajaxscroll

When attempting to host a web application built using the Impact JavaScript game engine on a local server, Chrome throws CORS errors

Currently, I am working on a webapp created with the Impact JS game engine that needs to run locally without using a localhost (using file:///C:/...). The issue I am facing is with Chrome, as it is blocking the loading of images (mainly png/jpg) from the m ...

javascripthtmlgoogle-chromecorsimpactjs

Modify a website link using Javascript by detecting two separate button clicks

I am seeking a way to dynamically change the src attribute of different images on a house depending on which button has been clicked. There are two groups of buttons: The types of house parts, such as windows, doors, garage, soffits, and gutters. The col ...

javascripthtml

Is the JSON data missing from the POST request?

I'm having trouble inserting data into the database using a POST request. Here is how I'm making the request: 127.0.0.1:3000/api/users?fname=asd&lname=edc&<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7870 ...

javascriptjsonnode.jsmongodbserve

What is the best way to avoid having multiple files in a JavaScript file input when a user selects a new file?

I am trying to implement a file input using vanilla JavaScript, and my goal is to restrict the user to uploading only a single file at a time. The issue I am facing is that if the user repeatedly selects a file and clicks the upload button, the file gets ...

javascripthtmlinputfile-iouser-input

Error: Uncaught promise rejection - The function is undefined in the context of Vue.js and Electron

I've been experimenting with anime.js to animate elements using promise functions. However, I'm encountering an issue where the second function does not run after the previous one successfully completes. <script> import Splash from '. ...

javascriptnode.jsvue.jspromiseelectron

Is there a more efficient way to optimize my coding for this Cellular Automata project?

As a beginner in programming, I wanted to delve into the world of cellular automata and decided to create my own using JavaScript. The project involves a simple binary (black and white) 2D CA where each cell updates its color based on the colors of its 8 ...

javascripthtmlcellular-automata

Using a navigation bar as a structural component in React

I have a new app in development that features a search bar on every page as part of the layout. When a user conducts a search, the results are displayed and they can click on a result to view more details in a separate component. My main question is regar ...

javascriptreactjsreact-routerreact-redux

Access the value of a JavaScript variable declared in one function within a separate function

Despite finding numerous posts on this topic, none of them suited my specific requirements. My goal is to utilize the seconddivval variable in the datepicker to display available dates. In my PHP code, I have a foreach loop with a hidden input: <td cl ...

javascriptphpjqueryarrays

Invoking a greasemonkey script when a user interacts with a button

For a script I wrote, I added an extra column and link in each row. However, the issue is that I want the links to trigger a function in my greasemonkey script and pass a variable to it. I have learned that because greasemonkey operates in a sandbox, achi ...

javascriptgreasemonkey

Absence of receiving any HTTP error codes when making REST calls

In our application, it is crucial to differentiate between 400 and 500 range error codes for distinct processes. Let's consider three REST calls: The first returns a status code of 200, the second returns 401, and the third returns 502 Initially, ...

javascriptajaxrestaurelia

Error is thrown when attempting to access nested elements using GetElementsByClassName within the window.onload function

I have a funky looking table on my webpage, here's an example: <body> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Product name</th> <th>Product ...

javascript