响应式画布

        响应式画布：在用户缩放浏览器窗口时，为便于动态更新画布尺寸与宽高比例，需要通过监听resize事件，来实现响应式画布。

window.onresize = function () {//TODO:重置渲染器宽高比renderer.setSize(window.innerWidth, window.innerHeight);//TODO:重置相机宽高比camera.aspect = window.innerWidth / window.innerHeight;//TODO:更新相机投影矩阵camera.updateProjectionMatrix();
};

        Tips：camera.updateProjectionMatrix()，

全屏控制

        在一些场景下，需要全屏显示三维场景页面，那么就需要用到全屏控制。

        此处，我们写两个按钮用户控制“全屏显示”和“退出全屏”，

        代码部分如下，

const addButton = function (name,left = "10px",top = "10px",callBack = (x) => x
) {const button = document.createElement("button");button.textContent = `${name}`;button.style.position = "absolute";button.style.outline = 'none';button.style.border = 'none';button.style.padding = '5px';button.style.borderRadius = '3px';button.style.backgroundColor = 'rgba(255,255,255,0.3)';button.style.color = '#ffffff';button.style.cursor = 'pointer';button.style.left = left;button.style.top = top;button.style.zIndex = "999";button.onclick = function () {callBack();};return button;
};const fullScreenBtn = addButton("全屏展示", "10px", "10px", function () {// renderer.domElement.requestFullscreen();document.body.requestFullscreen();
});const exitFullScreenBtn = addButton("退出全屏", "10px", "50px", function () {document.exitFullscreen();
});
document.body.appendChild(fullScreenBtn);
document.body.appendChild(exitFullScreenBtn);