将 three.js 背景更改为不透明度 0.5答案

【问题标题】：Changing three.js background to opacity .5将 three.js 背景更改为不透明度 0.5
【发布时间】：2023-04-03 15:16:01
【问题描述】：

好的，所以我正在尝试将 canvas/three.js 的背景设置为类似于 opacity:.5 的东西，我可以使用它使其完全透明 new THREE.WebGLRenderer( { alpha: true } );

但这不是我想要的，我希望能够在渲染（画布背景）后面看到，所以我可以看到下面页面的主体/html，但将对象保留在渲染 opacity:1 中。

有什么想法吗？谢谢！

【问题讨论】：

【解决方案1】：

您可以尝试如下设置渲染器的清除颜色和 alpha 值，以便更好地控制背景的渲染方式：

const renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setClearColor( color );
renderer.setClearAlpha( 0.5 );

【讨论】：

MrDoob 告诉我不要使用setClearColor。我应该总是使用scene.background = new THREE.Color(...) 这个建议改变了吗？
我没有意识到这一点。我个人认为scene.background 是可以的，只要你不需要透明背景色。将setClearColor() 与setClearAlpha() 结合使用对我来说似乎更容易理解。
一行：renderer.setClearColor( 0xff0000, 0.5 );
那就更好了 ;)
正如@WestLangley 所说，我最终做了setClearColor( 0x000000, .5 ); 以及设置alpha: true