three.js教程8-渲染器WebGLRenderer和前端UI界面

1、html的UI交互界面与Canvas画布叠加

需求：把threejs Cavnas画布和HTML元素叠加布局，在canvas上添加按钮，通过按钮点击修改canvas场景。

// canvas画布绝对定位
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = '0px';
renderer.domElement.style.left = '0px';
renderer.domElement.style.zIndex = -1;//让场景在最底层

<div style="color: #ff0000;z-index:2;position: absolute;">红色</div>

2、Three.js背景颜色和透明度

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

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

3、Three.js的canvas保存为图片

const renderer = new THREE.WebGLRenderer({
    //是否保留缓直到手动清除或被覆盖，想把canvas画布上内容下载到本地，需要设置为true
    preserveDrawingBuffer:true,
});

// 鼠标单击id为download的HTML元素，threejs渲染结果以图片形式下载到本地
document.getElementById('download').addEventListener('click',function(){
    // 创建一个超链接元素，用来下载保存数据的文件
    const link = document.createElement('a');
    // 通过超链接herf属性，设置要保存到文件中的数据
    link.href = renderer.domElement.toDataURL("image/png");
    link.download = 'threejs.png'; //下载文件名
    link.click(); //js代码触发超链接元素a的鼠标点击事件，开始下载文件到本地
})

//以不同的格式获取像素信息
canvas.toDataURL("image/png");
canvas.toDataURL("image/jpeg");
canvas.toDataURL("image/bmp");

4、深度冲突(模型闪烁)

问题现象：两个Mesh重合，电脑GPU分不清谁在前谁在后，这种现象，可以称为深度冲突Z-fighting

解决方法1：适当偏移，解决深度冲突，偏移尺寸相对模型尺寸比较小，视觉上两个平面近似还是重合效果。

解决方法2：logarithmicDepthBuffer=true，设置对数深度缓冲区，能缓解深度冲突，但是不能根除冲突。

// WebGL渲染器设置
const renderer = new THREE.WebGLRenderer({
    // 设置对数深度缓冲区，优化深度冲突问题
    logarithmicDepthBuffer: true
});

5、模型加载进度条

loader.load("../工厂.glb", function (gltf) {
    model.add(gltf.scene);
    // 加载完成，隐藏进度条
    // document.getElementById("container").style.visibility ='hidden';
    document.getElementById("container").style.display = 'none';
}, function (xhr) { 
    const percent = xhr.loaded / xhr.total;
    console.log('加载进度' + percent);
})

 

文章中部分素材选取自Threejs中文网：http://www.webgl3d.cn/