Javascript THREE.js-如何淡化背景？

我试图重新创建淡入图形缓冲区并留下绘制对象的轨迹的效果，而不是在每一帧清除它。这是一个非常简单的效果，在2D中会这样做：

但我还没有找到在WebGL中实现这一点的方法，尤其是使用Three.js。我试图通过将preserveDrawingBuffer设置为true并使用Effect Composer来实现这一点，但并没有成功

---

如果有任何建议，我将不胜感激。

一种方法是在场景后面放置一个透明平面，并设置

preserveDrawingBuffer=true

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

// background plane
var plane = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshBasicMaterial( { transparent: true, opacity: 0.1 } ) );
plane.position.z = -10;
scene.add( plane );

有关实时示例，请参见：

---

three.js r.64

WestLangley描述的技术效果非常好，但是如果您想要对运动轨迹进行更多控制，也可以使用

WebGLRenderTarget

例如，您可能已经注意到，将平面的

不透明度

设置为小于

0.1的值会导致屏幕上出现永久污点。使用渲染目标可以修复此问题

该技术需要三个场景和三种纹理：


sceneContent包含多维数据集
sceneComp包含材质为（textureNew+textureOld）的四元复合材料
sceneScreen包含材质为（textureComp）的四屏幕

它们应该这样呈现：


将场景内容、摄影机透视渲染到textureNew上
将场景贴图、摄影机或渲染到纹理贴图上
渲染场景网格、摄影机或渲染到纹理上
在屏幕上渲染场景屏幕、摄影机或

无需将
autoClear
设置为false或
preserveDrawingBuffer
设置为true

举一个活生生的例子，请看：
很有意义，我想到了飞机，但没有想到把它放在场景后面。我想诀窍是在摄影机移动时将其隐藏在一切后面。嗯，您可以使用正交摄影机先渲染平面，然后在第二个渲染过程中渲染顶部的场景。
renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
renderer.autoClearColor = false;

// background plane
var plane = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshBasicMaterial( { transparent: true, opacity: 0.1 } ) );
plane.position.z = -10;
scene.add( plane );