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

我正在尝试重新创建淡化绘制缓冲区并留下绘制对象的痕迹的效果,而不是在每一帧都清除它.这是一个非常简单的效果,在2D模式下将像这样进行：http://jsfiddle.net/faRW3/1/

// 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来进行此操作,但没有成功.

我将不胜感激任何建议.

解决方法:

一种方法是在场景后放置透明平面,并设置prepareDrawingBuffer = 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

标签：three-js,javascript
来源： https://codeday.me/bug/20191122/2059077.html