javascript - In Three.js Is there a way to produce a trail that slowly fades over time? -
i looking produce effect similar following example: https://threejs.org/examples/?q=trails#webgl_trails
however, make old trail fade background on time -- rather persist increasingly messy screen.
it seems following code allow draw on previous frames without clearing them:
renderer = new three.webglrenderer( { preservedrawingbuffer: true } ); renderer.autoclearcolor = false;
but unsure how make each frame fade background new frames drawn on top. seems painting on screen transparent color work, i'm not sure how approach that.
you take example showed above, , create faint black plane sits directly in front of 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 hold camera , 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 scene scene.add(camgroup);
this make sure every time scene rendered, it'll fade previously-rendered particles black. you'll need play opacity of fadematerial
, position of fademesh
desired effect.
renderorder = -1;
makes sure render plane first (fading out previous particles), , render particles, avoid covering newest ones.
wiki
Comments
Post a Comment