Threejs_03 全屏+响应式画布实现

咋控制全屏呢？

1.做一个用来点击的按钮

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

2.给这个按钮添加一个事件，并且给他放入屏幕中

btn.onclick = function () {
  // 全屏 (画布)
  // renderer.domElement.requestFullscreen();
  // 全屏 (document.body)  可以看到写入的按钮
  document.body.requestFullscreen();
};
// 将按钮追加
document.body.appendChild(btn);

请注意：这个时候应该让document来实现这个requestFullscreen 否则 全屏以后 就看不见这个按钮了。因为全屏以后，看见的就是document 而不是renderer了

点击以后 就能进入全屏模式了

3.退出全屏按钮，虽然说进入全屏以后 会显示点击键盘上的ESC可以退出全屏，但是我们也需要做出这个功能。

//退出全屏按钮 
var exitBtn = document.createElement("button");
exitBtn.innerHTML = "点击退出全屏";
exitBtn.style.position = "absolute";
exitBtn.style.top = "10px";
exitBtn.style.left = "100px";
exitBtn.style.zIndex = "999";
exitBtn.onclick = function () {
  // 退出全屏
  document.exitFullscreen();
};
// 将按钮追加
document.body.appendChild(exitBtn);

这个时候，全屏的功能就实现了

咋控制画布自适应呢？

 问题蛮严重的哦~

resize事件

我们可以侦听窗口的resize改变，触发回调函数，动态的修改画布的大小比例

// 监听窗口的变化 重新设置渲染器的大小 画布自适应窗口
window.addEventListener("resize", () => {
  // 重新设置渲染器的大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 重新设置相机的宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 重新计算相机的投影矩阵
  camera.updateProjectionMatrix();
});