渲染器设置(全屏、锯齿等)

下面给大家演示下Web3D项目中，threejs WebGL渲染器WebGLRenderer常用的配置。

全屏渲染

回顾：局部渲染

// threejs输出画布的尺寸
const width = 800; //宽度
const height = 800; //高度
const camera = new THREE.PerspectiveCamera(30,width/height,1,3000)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(width, height);

全屏渲染

// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width = window.innerWidth; //窗口文档显示区的宽度作为画布宽度
const height = window.innerHeight; //窗口文档显示区的高度作为画布高度
const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

全屏布局注意CSS的设置(vue3的文件style.css可以设置)。

body{
    overflow: hidden;/* 如果出现滚动条，隐藏滚动条 */
    margin: 0px;/*消除canvas画布与body边距 */
}

canvas画布宽高度动态变化

canvas画布宽高度动态变化,需要更新相机和渲染的参数，否则无法正常渲染。

// onresize 事件会在窗口被调整大小时发生
window.onresize = function () {
    // 重置渲染器输出画布canvas尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 如果相机视锥体相关参数发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
    camera.updateProjectionMatrix();
};

渲染器锯齿属性.antialias

设置渲染器锯齿属性.antialias的值可以直接在参数中设置，也可通过渲染器对象属性设置。

const renderer = new THREE.WebGLRenderer({
  antialias:true,
});

或

renderer.antialias = true,

设备像素比window.devicePixelRatio

如果你有web前端基础，应该了解window对象，设备像素比.devicePixelRatio是window对象的一个属性，该属性的值和你的硬件设备屏幕相关，不同硬件设备的屏幕window.devicePixelRatio的值可能不同，可能就是1、1.5、2.0等其它值。

// 不同硬件设备的屏幕的设备像素比window.devicePixelRatio值可能不同
console.log('查看当前屏幕设备像素比',window.devicePixelRatio);

设置设备像素比.setPixelRatio()

如果你遇到你的canvas画布输出模糊问题，注意设置renderer.setPixelRatio(window.devicePixelRatio)。

注意：注意你的硬件设备设备像素比window.devicePixelRatio刚好是1，那么是否执行.setPixelRatio()不会有明显差异，不过为了适应不同的硬件设备屏幕，通常需要执行该方法。

// 获取你屏幕对应的设备像素比.devicePixelRatio告诉threejs,以免渲染模糊问题
renderer.setPixelRatio(window.devicePixelRatio);