three.js 中设置透明背景

类似这样的,canvas感觉是透明的,里面的3D在上面,通常做地球旋转之类的效果,

 three.js 中设置透明背景_第1张图片

 

webgl 设置:setClearColor(1.0,1.0,1.0,1.0) rgba格式最后一个参数就是alpha

three.js设置:

renderer = new THREE.WebGLRenderer( { antialias: true,alpha:true } );
renderer.setClearColor(0xEEEEEE, 0.0);或者renderer.setClearAlpha(0.0);它的意思是每次绘制清除缓冲区后的颜色通道设置,简单就是设置每次绘制的背景颜色

 但需要注意:有时候你会发现怎么修改都没有用,那有可能是你场景设置了背景颜色;

例如:

this.scene.background = new THREE.Color(0x000000); 这样设置就会导致你设置渲染alpha的透明度没作用,

还有一种情况,就是你只需要设置 alpha :true 就可以了,

反正我是遇到了,至于什么原因不太清楚 

你可能感兴趣的:(threejs,three.js,设置背景透明)