自学内容网 自学内容网

69. Three.js背景透明度

通过Three.js渲染一个模型的时候,不希望canvas画布有背景颜色,也就是canvas画布完全透明,可以透过canvas画布看到画布后面叠加的HTML元素图文,呈现出来一种三维模型悬浮在网页上面的效果。

threejs canvas画布插入到web页面上

<div id="webgl"></div>
document.getElementById('webgl').appendChild(renderer.domElement);

.setClearAlpha()方法

改变背景透明度值

renderer.setClearAlpha(0.8);

完全透明

renderer.setClearAlpha(0.0);

背景透明alpha: true

通过Three.js渲染器WebGLRendereralpha属性值设置为true就可以,WebGL渲染器的alpha属性默认值是false

// 在构造函数参数中设置alpha属性的值
var renderer = new THREE.WebGLRenderer({
  alpha: true
});

.setClearColor()方法

.setClearColor()方法的参数2,可以用来设置背景颜色透明度。

renderer.setClearColor(0xb9d3ff, 0.4); //设置背景颜色和透明度

原文地址:https://blog.csdn.net/Miller777_/article/details/142813896

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!