响应式全屏Canvas适配Babylon内容，如何调整尺寸避免内容拉伸

问题根因 #

你之前写的resize逻辑只改了Canvas的CSS显示宽高，完全没动Babylon的实际绘图缓冲区分辨率，也没同步相机的宽高比参数——本质就是把一张分辨率固定的渲染图，强行拉到新的显示尺寸，自然会出现横向、纵向的拉伸变形。

落地实现步骤 #

1. 初始化Babylon引擎的时候直接把目标Canvas传进去，开启设备像素比适配，避免缩放时画面发虚

   const canvas = document.getElementById("canvas");
   const engine = new BABYLON.Engine(canvas, true, {
     adaptToDeviceRatio: true
   });
   

2. 删掉原来jQuery的resize回调里手动改CSS宽高的逻辑，换成调用引擎自带的resize接口

   window.addEventListener("resize", () => {
     // 这个方法会自动完成所有重算：画布实际分辨率更新、相机参数同步、视口匹配
     engine.resize();
   });
   

3. 配置相机的时候把视口设为占满整个画布，引擎会在窗口尺寸变化时自动同步相机的宽高比，不需要手动计算

   const camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 2, 15, BABYLON.Vector3.Zero(), scene);
   camera.viewport = new BABYLON.Viewport(0, 0, 1, 1);
   camera.attachControl(canvas, true);
   

4. 补一段基础CSS，清掉默认的边距偏移

   html, body {
     width: 100%;
     height: 100%;
     margin: 0;
     overflow: hidden;
   }
   #canvas {
     width: 100%;
     height: 100%;
     display: block;
   }
   

容易踩的坑 #

• 别手动去改Canvas元素的width、heightHTML属性，所有分辨率计算全交给engine.resize()处理就行，自己写的逻辑很容易和引擎内部参数冲突
• 别在resize回调里自己算相机的宽高比，引擎已经做了全套的适配逻辑，手动算反而容易出现比例不对的问题
• 别给Canvas写死固定像素的尺寸，全靠百分比布局+引擎的resize逻辑处理，才能做到自适应时不拉伸

内容的提问来源于stack exchange，提问作者Andrés García