Three.js添加resize监听后页面缩放变空白的解决方法求助

你的代码有几个关键问题导致缩放页面时空白，逐一修复即可解决：

核心问题点 #

• 缺失相机实例：代码里直接使用camera变量，但从来没创建过相机，这是最根本的错误——没有相机就无法将场景内容渲染到画布上。
• Resize事件未更新相机投影矩阵：修改相机宽高比后，必须调用camera.updateProjectionMatrix()让新的宽高比生效。
• Resize后未重新渲染：调整尺寸后没有再次调用渲染方法，画布不会更新。
• 未适配高DPI屏幕：缺少像素比设置，可能导致画面模糊。

修复后的完整代码 #

import * as THREE from 'three';
import "./style.css"

// 场景
const scene = new THREE.Scene();

// 创建球体
const geometry = new THREE.SphereGeometry(3, 64, 64);
const material = new THREE.MeshStandardMaterial({
  color: "#00ff83",
})

// 网格（几何体+材质）
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh)

// 尺寸
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
}

// 相机（新增！之前缺失的关键部分）
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.z = 20 // 把相机往后拉，确保能看到球体
scene.add(camera)

// 灯光
const light = new THREE.PointLight(0x00ff00, 100, 100)
light.position.set(0, 10, 10)
scene.add(light)

// 渲染器
const canvas = document.querySelector(".webgl");
const renderer = new THREE.WebGLRenderer({ canvas })
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(window.devicePixelRatio) // 适配高DPI屏幕
renderer.render(scene, camera)

// 窗口 resize 事件处理
window.addEventListener('resize', () => {
  sizes.width = window.innerWidth
  sizes.height = window.innerHeight

  // 更新相机
  camera.aspect = sizes.width / sizes.height
  camera.updateProjectionMatrix() // 必须调用这个方法让宽高比生效

  // 更新渲染器尺寸
  renderer.setSize(sizes.width, sizes.height)
  renderer.setPixelRatio(window.devicePixelRatio)

  // 重新渲染场景
  renderer.render(scene, camera)
})

关键修复说明 #

1. 新增相机实例：添加了PerspectiveCamera（透视相机），设置了合理的视野角度、宽高比、近远裁剪面，并调整了相机位置确保球体在视野内。
2. 补充相机投影矩阵更新：在修改camera.aspect后调用camera.updateProjectionMatrix()，让相机的投影参数同步更新。
3. Resize后重新渲染：在事件处理末尾调用renderer.render(scene, camera)，确保尺寸变化后画面能及时更新。
4. 添加像素比设置：renderer.setPixelRatio(window.devicePixelRatio)让渲染结果在高分辨率屏幕上更清晰。

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