如何在JavaScript中修改导出图片分辨率？Three.js WebGLRenderer问题

嘿，作为Three.js新手碰到这个分辨率问题太正常了，我来一步步帮你搞定～

当前导出的图片分辨率和Canvas尺寸绑定，是因为WebGLRenderer默认基于当前画布的像素尺寸渲染场景，所以导出的就是当前画布的内容。要导出更高（或自定义）分辨率的图片，核心思路是临时把渲染器切换到目标分辨率，渲染场景后导出，再恢复原来的尺寸，这样既不影响页面显示，又能拿到高分辨率的图片。

具体步骤&代码示例 #

假设你已经有scene和camera的实例，结合你提供的代码片段，修改后的导出逻辑大概是这样：

// 1. 先保存渲染器的原始尺寸，避免影响页面显示
const originalWidth = renderer3D.domElement.width;
const originalHeight = renderer3D.domElement.height;

// 2. 设置目标分辨率：可以用倍数（比如2倍、3倍）或者固定宽高
const resolutionScale = 2; // 想要的缩放倍数，比如3倍就改成3
const targetWidth = originalWidth * resolutionScale;
const targetHeight = originalHeight * resolutionScale;

// 更新渲染器尺寸：第三个参数设为false，只修改Canvas实际像素尺寸，不改变CSS显示样式
renderer3D.setSize(targetWidth, targetHeight, false);

// 🌟 关键：临时调整相机的宽高比，避免场景拉伸
camera.aspect = targetWidth / targetHeight;
camera.updateProjectionMatrix();

// 重新渲染场景到高分辨率画布
renderer3D.render(scene, camera);

// 3. 执行你的导出逻辑（比如获取PNG的dataURL）
const exportDataURL = renderer3D.domElement.toDataURL('image/png');
// 这里可以继续你的下载逻辑，比如创建a标签触发下载

// 4. 恢复原始状态，保证页面显示正常
renderer3D.setSize(originalWidth, originalHeight, false);
// 恢复相机的宽高比
camera.aspect = originalWidth / originalHeight;
camera.updateProjectionMatrix();
// 重新渲染场景到原始尺寸
renderer3D.render(scene, camera);

几个重要的细节说明 #

• setSize(targetWidth, targetHeight, false)：第三个参数false是核心，它会阻止渲染器修改Canvas的CSS样式，这样页面上的Canvas显示尺寸不会变，只是内部的像素分辨率提高了。
• 相机宽高比调整：如果你的相机是PerspectiveCamera，它的aspect属性必须和渲染器的尺寸比例一致，否则场景会被拉伸，所以临时切换分辨率时一定要同步更新相机的aspect并调用updateProjectionMatrix()。
• 自定义分辨率：如果你不想用倍数，也可以直接设置固定的目标宽高，比如targetWidth = 2318; targetHeight = 524;，只要是你需要的分辨率数值就行。

这样操作后，你导出的PNG图片就是目标分辨率的了，完全不会影响页面上的正常渲染效果～

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