WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

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

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

通过Three.js渲染器WebGLRendereralpha属性值设置为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>
本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com