1、自适应屏幕大小

你会发现，我们前面写好的代码，在页面尺寸发生改变的时候，并不能自适应的改变尺寸，而出现空白或者滚动条突出的情况。所以监听屏幕大小的改变，来重新设置相机的宽高比例和渲染器的尺寸大小，代码如下：

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
   
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

效果演示

2、通过按钮控制控大小

1、添加按钮并设置样式

var btn = document.createElement("button");
btn.innerHTML="点击全屏"
btn.style.position="absolute";
btn.style.top = "10px";
btn.style.left = "10px";
btn.style.zIndex = "999";
// 退出全屏
var exitbtn = document.createElement("button");
exitbtn.innerHTML="退出全屏"
exitbtn.style.position="absolute";
exitbtn.style.top = "10px";
exitbtn.style.left = "130px";
exitbtn.style.zIndex = "999";

2、设置点击事件

btn.onclick = function(){
   
  // 画布全屏
  //renderer.domElement.requestFullscreen(); //按钮没有包括在内。
  //body 全屏
  document.body.requestFullscreen(