Javascript 制作渲染器'；s背景透明，但不是形状three.js

我使用的是three.js，其中我显示了一个静态背景图像，并在上面有一个渲染器为形状设置动画。这样做的原因是在不影响图像的情况下自由旋转形状的渲染器。问题是背景位于渲染器后面，所以我的问题是，是否可以使渲染器的“背景”透明（允许形状仍然显示），以便完全看到背景图像

我尝试过的事情：

• 在渲染器的DomeElement上设置不透明度
• 使用渲染器的setClearColor方法设置rgba的透明度

这里是一个简化的示例，您将看到正方形（因此渲染器）覆盖了背景。

---

您需要设置

webGLRenderer

alpha

参数

var renderer = new THREE.WebGLRenderer( { alpha: true } );

可以将“清除颜色”保留为默认值

renderer.setClearColor( 0x000000, 0 ); // the default

更新小提琴：或

---

3.jr.63

哦，我的天哪！你是个救生员！我发现在启动渲染器时缺少了“alpha:true”选项。我没有意识到我必须设置它，我想知道为什么在ClearColor方法中设置alpha不起作用。谢谢当你使用EffectComposer进行任何后期处理时，透明度就会中断…是的，这是一个非常好的静态背景解决方案。不确定这会如何影响性能，但其他设置不同场景只是为了渲染背景的解决方案似乎有些过头了。（除非您使用的是EffectComposer。）

renderer.setClearColor( 0x000000, 0 ); // the default