In Three.js Is there a way to produce a trail that slowly fades over time?

问题

I am looking to produce an effect very similar to the following example: https://threejs.org/examples/?q=trails#webgl_trails

However, I would like to make the old trail fade into the background over time -- rather than just persist into an increasingly messy screen.

It seems that the following code will allow you to draw over previous frames without clearing them:

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

But I am unsure how to make each frame fade into the background as new frames a drawn on top. It seems like painting over the screen with a somewhat transparent color would work, but I'm not sure how to approach that.

回答1:

You could easily take the example you showed above, and create a very faint black plane that sits directly in front of the camera:

// Make 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);

// Create Object3D to hold camera and transparent plane
var camGroup = new THREE.Object3D();
var camera = new THREE.PerspectiveCamera();
camGroup.add(camera);
camGroup.add(fadeMesh);

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

// Make plane render before particles
fadeMesh.renderOrder = -1;

// Add camGroup to scene
scene.add(camGroup);

This will make sure that every time the scene is rendered, it'll slowly fade the previously-rendered particles to black. You'll need to play with the opacity of fadeMaterial and position of fadeMesh to get the desired effect.

renderOrder = -1; makes sure that you render the plane first (fading out previous particles), and then render the particles, to avoid covering the newest ones.

回答2:

There's now an example using the postprocessing EffectComposer and AfterImagePass.

https://threejs.org/examples/webgl_postprocessing_afterimage.html

来源：https://stackoverflow.com/questions/46084830/in-three-js-is-there-a-way-to-produce-a-trail-that-slowly-fades-over-time

标签

javascript

three.js