在 Three.js 中有沒有辦法產生隨着時間慢慢消失的軌跡？

Question

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

然而，我想讓舊的軌跡隨着時間的推移逐漸消失在背景中——而不是僅僅停留在一個越來越凌亂的屏幕上。

似乎以下代碼將允許您在不清除之前的幀的情況下繪制它們：

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

但我不確定如何讓每一幀淡入背景，因為在頂部繪制了新幀。 似乎用有點透明的顏色在屏幕上繪畫會起作用，但我不確定如何處理。

Answer 1

您可以輕松地采用上面顯示的示例，並創建一個位於相機正前方的非常微弱的黑色平面：

// 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; 確保首先渲染平面（淡出之前的粒子），然后渲染粒子，以避免覆蓋最新的粒子。

Answer 2

現在有一個使用后處理 EffectComposer 和 AfterImagePass 的示例。

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