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

视频讲解参考课程《实战开发常用技能》课时第22小节

通过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>