使用three.js设置透明背景

Posted 2023-02-27

【中文标题】使用three.js设置透明背景

【英文标题】：Setting a transparent background with three.js

【发布时间】：2021-04-27 13:39:43

【问题描述】：

这是我第一次使用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

【参考方案1】：

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

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

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