用 three.js 设置透明背景

Question

这是我第一次与 three.js 合作，

我找到了一个我非常喜欢的代码笔，但我在更改背景颜色时遇到了麻烦。

我查看了有关此主题的其他问题，并尝试将{ alpha: true}添加到renderer = new THREE.WebGLRenderer(); 正如这篇文章所暗示的： 透明背景与 three.js

我的目标是在<div class="page-content"></div>元素上创建透明背景。我非常感谢任何帮助！

代码笔： https://codepen.io/ramsaylanier/pen/raybzy

Answer 1

我认为那里缺少一些东西：

1. 正如您所提到的，您确实需要alpha: true在现场。
2. 不要更改setClearColor 。
3. 如果您使用的是 EffectComposer，则需要一些额外的工作才能使其允许透明背景，请参阅这些评论。 如何阻止 EffectComposer 破坏我的透明背景？

我建议从renderer.render( scene, camera )而不是composer.render()开始，以确保前两个部分正常工作。

Answer 2

新三.WebGLRenderer({ canvas: canvas,

 preserveDrawingBuffer: true,  // so canvas.toBlob() make sense

alpha:true,   // so png background is transparent

})