THREE.js - 如何淡入淡出背景？

我試圖重新創建繪製緩衝區的淡入淡出和繪製的對象的痕跡，而不是清除它的每一幀的影響。這是一個非常簡單的效果，在2D將這樣進行：http://jsfiddle.net/faRW3/1/THREE.js - 如何淡入淡出背景？

// draw stuff 
c.fillStyle = "red"; 
c.fillRect(Math.sin(time)*50+70, Math.cos(time)*50+70, 20, 20); 

// fade background 
c.fillStyle = "rgba(255, 255, 255, 0.25)"; 
c.fillRect(0, 0, canvas.width, canvas.height);

但我還沒有發現這樣做的WebGL中，尤其是使用three.js所的方式。我試圖通過將preserveDrawingBuffer設置爲true並與Effect Composer一起玩，但沒有成功。

我將不勝感激任何意見。

來源

2013-12-17 araid

一種方法是在場景後面放置一個透明平面並設置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);

對於一個活生生的例子，請參閱：http://vincemckelvie.com/Potluck/Cartwheel/

three.js所r.64

來源

2013-12-17 20:16:49 WestLangley

使得很多的意義上，我認爲飛機的，但不是將其放置在幕後。我想訣竅是在相機移動時將其保留在一切後面。 – araid

那麼，您可以使用正交相機先渲染飛機，然後在第二個渲染通道中渲染場景。 – WestLangley

通過WestLangley描述的技術工作得很好，但如果你想在你運動的更多控制落後，你也可以使用WebGLRenderTarget。

您可能已經注意到，例如將平面的opacity設置爲低於0.1的值會導致屏幕上出現永久性污漬。使用渲染目標可以解決這個問題。

該技術需要三個場景和三個紋理：

sceneContent含有立方體
sceneComp包含quadComp與材料（textureNew + textureOld）
sceneScreen包含quadScreen與材料（textureComp）

它們應該像這樣呈現：

渲染sceneContent，cameraPerspective到textureNew
渲染sceneComp，cameraOrto到textureComp
渲染sceneScreen，cameraOrto到textureOld
渲染sceneScreen，cameraOrto到屏幕

沒有必要設置autoClear到假或preserveDrawingBuffer爲true。

對於一個活生生的例子，請參閱：https://codepen.io/brunoimbrizi/pen/MoRJaN

來源

2017-07-16 14:30:26 imbrizi

THREE.js - 如何淡入淡出背景？

回答

相關問題