Babylon.js 添加背景面板，让其铺满整个屏幕，平行相机与平行光线

目录

介绍

方案

代码

平行相机代码如下

光线也设为平行光

创建面板

---

介绍

搭建好了场景并封装为组件，但是用的的时候canves的尺寸是变化的，然后背景以及对应所看的界面却不好跟着变化。导致背景不好调整。

方案

        我们的摄像头视图是由近到远，距离越远的话，所看到的物体就越小，距离越近的话说看到的物体就越大。所以canves画布尺寸变化的同时就要调整物体的距离，也就是对应的z值。很难算出它刚好填充满屏。所以我们要将相机改为平行相机。这样物体无论多远大小都不变。

代码

平行相机代码如下

const orthoCamera = new BABYLON.FreeCamera("orthoCamera", new BABYLON.Vector3(0, 0, 0), scene.value);
orthoCamera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
camera.value = orthoCamera

光线也设为平行光

light1.value = new BABYLON.DirectionalLight("light1", new BABYLON.Vector3(0, 0,0), scene.value);
light1.value.diffus