Three.js场景尺寸调整：点击/按钮/滚动实现全屏切换问题

一、检查事件绑定目标 #

确保点击事件绑定到Three.js渲染的canvas元素上，而非父容器或其他无关元素，避免因元素层级或样式问题导致事件无法触发：

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

// 绑定点击事件到canvas
renderer.domElement.addEventListener('click', toggleFullscreen);

二、排查CSS干扰问题 #

如果canvas被其他元素覆盖，或父元素设置了pointer-events: none，会阻断点击事件传递：

• 确保canvas的CSS属性正确：

canvas {
  pointer-events: auto;
  z-index: 1; /* 若有重叠元素，保证canvas处于顶层 */
}

三、针对3D物体的点击检测（若需点击立方体触发） #

如果要点击立方体而非空白场景触发切换，需用Three.js的射线投射（Raycaster）检测点击是否命中目标物体：

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const cube = new THREE.Mesh(/* 你的立方体几何体、材质 */);

function onMouseClick(event) {
  // 将鼠标坐标转换为Three.js标准化设备坐标
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObject(cube);

  if (intersects.length > 0) {
    toggleFullscreen(); // 命中立方体时执行切换
  }
}

renderer.domElement.addEventListener('click', onMouseClick);

四、全屏/缩小核心实现逻辑 #

利用浏览器Fullscreen API切换状态，同时同步调整Three.js渲染尺寸与相机参数：

function toggleFullscreen() {
  const canvas = renderer.domElement;
  const isFullscreen = document.fullscreenElement === canvas;

  if (isFullscreen) {
    // 退出全屏，恢复初始尺寸（根据你的底部四分之一场景调整）
    document.exitFullscreen();
    renderer.setSize(window.innerWidth, window.innerHeight / 2);
    camera.aspect = window.innerWidth / (window.innerHeight / 2);
    camera.updateProjectionMatrix();
  } else {
    // 进入全屏
    canvas.requestFullscreen();
    // 监听全屏状态变化，确保渲染尺寸适配
    document.addEventListener('fullscreenchange', () => {
      if (document.fullscreenElement) {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
      }
    }, { once: true });
  }
}

五、按钮/滚动触发的扩展方案 #

• 按钮触发：直接给按钮绑定点击事件调用切换函数

<button onclick="toggleFullscreen()">切换全屏</button>

• 滚动触发：监听滚动事件，根据滚动位置触发切换

window.addEventListener('scroll', () => {
  // 示例：滚动到顶部时全屏，超过100px时缩小
  if (window.scrollY < 100 && !document.fullscreenElement) {
    toggleFullscreen();
  } else if (window.scrollY >= 100 && document.fullscreenElement) {
    toggleFullscreen();
  }
});

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