当前位置: 首页 > article >正文

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); //设置背景颜色和透明度

http://www.kler.cn/news/341111.html

相关文章:

  • 详解机器学习经典模型(原理及应用)——条件随机场
  • 【动态规划-最长递增子序列(LIS)】力扣2826. 将三个组排序
  • 【网站架构部署与优化】HAProxy
  • Redis存储时key的设置
  • 金融壹账通亮相2024东亚保险大会 深度参与粤港澳大湾区保险创新探讨
  • 物流系统原有40T数据加上每天至少要比之前多3G数据产品,这种该怎么解决
  • DHASH感知算法计算视频相邻帧的相似度
  • 代理IP的类型及其在爬虫中的应用
  • LeetCode组合总和
  • 【PostgreSQL 】实战篇——深入讨论分区表的概念、创建和管理方法,以及其在性能优化中的应用
  • 神经网络章节感知机部分 空间中任意一点到线性分割超平面的距离公式 解释说明
  • 【c++实现tcp客户端】
  • 前端模块化CommonJs、ESM、AMD总结
  • 【PGCCC】在 Postgres 上构建图像搜索引擎
  • 详情说明HTTP/2和HTTP/3两者间的区别
  • 影刀RPA在智能客服上的运用
  • 水污染急需机器人,材料局限遇难题,MXene 水凝胶有潜力
  • 21-DevOps项目发布一体化平台构建及应用实践
  • 使用fastjson解析json格式数据
  • 【海思方案的4G低功耗抓拍摄像机模组方案】