threejs的使用背景色透明

最新推荐文章于 2024-09-18 15:07:35 发布

原创最新推荐文章于 2024-09-18 15:07:35 发布 · 3.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #开发语言 #ecmascript

收录于

在THREE.js中，可以通过创建WebGLRenderer时设置alpha为true开启透明支持，然后使用setClearColor方法配合透明度参数（0为完全透明，1为不透明）来设置背景透明。这样可以避免threejs背景色遮挡已有背景图。

var renderer = new THREE.WebGLRenderer({
    antialias: true, //开启锯齿
    alpha: true
});
// 设置背景颜色
renderer.setClearColor(0x000000,0)
// 黑色
renderer.setClearColor(0x000000)

注意render的背景色需要取消，不然不生效。
如果我们希望threejs背景透明，比如数据大屏已经有背景图了，不希望threeejs的背景色遮挡，这时候就可以将threejs的背景设置为透明,设置背景透明前需要先将alpha设置为true
通过renderer.setClearColor(0x000000,0)第二个参数来设置透明度0是完全透明，1是不透明。可以按需调整。