在 Three.js 中，有没有一种方法可以产生随着时间的推移慢慢消失的痕迹？

Question

我希望产生与以下示例非常相似的效果： https://thirdjs.org/examples/ ?q=trails#webgl_trails

然而，我想让旧的踪迹随着时间的推移逐渐消失在背景中——而不是仅仅停留在越来越混乱的屏幕上。

看来以下代码将允许您绘制先前的帧而不清除它们：

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

但我不确定如何使每个帧淡入背景，因为新帧绘制在顶部。似乎用某种透明的颜色在屏幕上绘画会起作用，但我不确定如何处理。

Answer 1

现在有一个使用后处理 EffectComposer 和 AfterImagePass 的示例。

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

Answer 2

您可以轻松地采用上面显示的示例，并创建一个位于相机正前方的非常微弱的黑色平面：

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

这将确保每次渲染场景时，它都会将先前渲染的粒子慢慢淡化为黑色。您需要调整 的不透明度fadeMaterial和位置fadeMesh以获得所需的效果。

renderOrder = -1;确保首先渲染平面（淡出先前的粒子），然后渲染粒子，以避免覆盖最新的粒子。