使用three.js设置透明背景

Question

这是我第一次使用three.js，

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

我查看了有关此主题的其他问题，并尝试添加{ alpha: true} 到renderer = new THREE.WebGLRenderer();，正如这篇文章所建议的那样：Transparent background with three.js

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

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

Answer 1

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

1. 正如您所提到的，您确实需要alpha: true 在现场。
2. 不要更改setClearColor。
3. 如果您使用的是 EffectComposer，则需要进行一些额外的工作才能使其具有透明背景，请参阅这些 cmets。 How do I stop EffectComposer from destroying my transparent background?

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