THREE.js：如何使用3D网格绘制2D网格

Question

我有两个画布：

<canvas width="1748" height="822" style="width: 100%; height: 100%;"></canvas>
<canvas width="1748" height="822" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0.3;"></canvas>

第一个用于绘制3D立方体，第二个用于绘制2D网格，如下所示：

然后我将100％放大，如下所示：

但是，我的代码中的2D网格缩放错误。放大100％后，其宽度应与初始状态相同：几乎为两个栅格宽度，但现在更改为四个栅格宽度。

我这样绘制2D网格：

（1）pixelsPerCentimetre = 1; //一个世界坐标单位代表一个像素

（2）放大或缩小时：

pixelsPerCentimetre = pixelsPerCentimetre *（缩放/ 100）;

所以当我放大100％时，pixelPerCentimetre = 2

仅查看2D环境，网格的比例是正确的。

但是我的问题是，在3D环境中，无论缩放比例如何，3D立方体的宽度都与初始状态相同，初始状态大约是两个栅格宽度。我应该如何修改图形网格的代码，以便此缩放比例正确。

谢谢。