Three.js 背景完全透明 模型悬浮在网页上 - 文章教程

Three.js 背景完全透明 模型悬浮在网页上

发布于 2021-09-16 字数 1414 浏览 1013 评论 0

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

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

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

注意设置.alpha=true的时候,不要设置.background属性的值,或者通过.setClearColor()方法设置threejs背景颜色。如果通过.setClearColor()方法设置背景颜色,在把该方法的参数2设置为0.0情况下是不影响canvas画布完全透明效果的。

<!-- canvas画布会插入到该div元素中,通过div可以控制canvas画布显示位置-->
<!-- 注意设置z-index属性,保证canvas画布渲染效果叠加到网页其它HTML元素上面-->
<div id="pos" style="z-index:1;position: absolute;left: 200px;top: 200px;"></div>
<script>
var renderer = new THREE.WebGLRenderer({
  // 在构造函数参数中设置alpha属性的值
  alpha:true
});
// 设置渲染区域尺寸,本质就是设置输出canvas的尺寸
renderer.setSize(500, 500);
// 把渲染器的渲染结果canvas对象插入到'pos'对应的div元素中
document.getElementById('pos').appendChild(renderer.domElement);
</script>

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

泛泛之交

这个人比较懒,什么都没有填写!

20 文章
3 评论
21140 人气
更多

推荐作者

瑾兮

文章 11 评论 2

carlo_sn

文章 0 评论 0

15867725375

文章 0 评论 0

a3576419

文章 0 评论 0

wendy

文章 0 评论 0