如何在Three.js中实现原生全屏？多种方法尝试失败求解决方案

好问题！其实原生Three.js本身并没有内置专门的全屏方法，但咱们完全可以用原生Web全屏API结合Three.js的渲染器来实现，不需要依赖任何第三方库，也适配你把代码放在JS文件里的场景。

核心思路 #

全屏是浏览器提供的功能，Three.js只负责3D内容渲染，所以我们只需要操作Three.js渲染器对应的<canvas>元素，调用浏览器的全屏API即可。

具体实现步骤 #

假设你已经创建了Three.js的渲染器实例：

const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

1. 封装全屏请求/退出的工具函数

为了兼容不同浏览器的前缀（虽然现代浏览器大多支持标准API，但做兼容更稳妥），可以写两个工具函数：

// 请求全屏
function requestFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) { // Safari、旧版Chrome
    element.webkitRequestFullscreen();
  } else if (element.mozRequestFullScreen) { // 旧版Firefox
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) { // IE/旧版Edge
    element.msRequestFullscreen();
  }
}

// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

2. 绑定用户交互事件触发全屏

比如绑定键盘事件（像你之前尝试的keydown），按F键进入全屏，Esc键退出：

document.body.addEventListener('keydown', (event) => {
  // 按F键触发全屏
  if (event.key.toLowerCase() === 'f') {
    // 传入Three.js渲染器的canvas元素
    requestFullscreen(renderer.domElement);
  }
  // 按Esc键退出全屏
  else if (event.key === 'Escape') {
    exitFullscreen();
  }
});

解答你的几个疑问 #

• 为什么Three.js里找不到fullscreen相关内容？
  因为全屏属于浏览器的原生能力，Three.js的核心定位是3D渲染引擎，不会重复封装这类和渲染无关的浏览器API。
• 代码在JS文件里没问题吗？
  完全没问题！只要你能获取到renderer.domElement（也就是Three.js生成的canvas），就可以直接调用上面的函数，不需要修改HTML文件。
• 为什么之前用THREEx的代码不行？
  因为THREEx是第三方扩展，不是Three.js原生的，你不想用它的话，用原生API是更可靠的方案。

注意事项 #

浏览器的全屏API有安全限制：必须由用户主动触发（比如点击、键盘按键），不能在页面加载完成后自动调用，否则会被浏览器阻止。

内容的提问来源于stack exchange，提问作者user5515