Javascript 在3d世界上定位2d透视3d世界

所以我有这个方法在2d世界上绘制3d世界中的所有矩形，我能够在2d画布上很好地定位3d对象，但现在我想将2d画布放置到位，而不是矩形，（这样我将只绘制一个带有图像的大矩形，而不是每个矩形）

方法是这样的

createBackground（对象）{
const buffer=document.createElement（“画布”）.getContext（“2d”）；
const bufferRect=this.createEntity（）；
const display=this.display；
让{
扎克西斯，
画布：{
宽度，
高度，
},
电流照相机
}=显示；
常量cameraMatrix=currentCamera.matrix；
扎克西斯--；
常数halfZ=zAxis/2；
设{coords:[x，y]，area:[w，h]}=objects[objects.length-1]；
const worldwiewProjection=mat4.create（）；
设[bX，bY，lX，lY]=[x+w，y+h，x-w，y-h]；//大x，小x
for（设i=objects.length-1；i--；）{
常量对象=对象[i]；
常数{coords:[[ux，[uy]，面积：[[uw，[uh]}=objects[i]；
如果（x>bX）{
bX=x+w；
}否则如果（xbY）{
bY=_y+_h；
}否则如果（_y{
const ndc=vec3.transformMat4（[]，p，worldViewProjection）；
返回[
（ndc[0]*0.5+0.5）*宽度，
（ndc[1]*-0.5+0.5）*高度，
];
});
常数ww=点[1][0]-点[0][0]；
常数hh=点[1][1]-点[0][1]；
buffer.strokeStyle='red'；
缓冲区.strokeRect（…点[0]，ww，hh）；
}
bufferRect.move（（bX+lX）/2，（bY+lY）/2）；
bufferRect.setSize（Math.abs（bX）+Math.abs（lX）-5，Math.abs（bY）+Math.abs（lY）-5）；
const texture=display.textureFromImage（buffer.canvas）；
bufferRect.attachImage（纹理）；
}

问题就在这里，我试图把矩形放在中间，并把它的大小设置在最左边的矩形和最右边的矩形之间的距离，以及一些顶部和底部

。

bufferRect.move（（bX+lX）/2，（bY+lY）/2）；
bufferRect.setSize（Math.abs（bX）+Math.abs（lX）-5，Math.abs（bY）+Math.abs（lY）-5）；

这是完整的代码

const FRAGMENT_SHADER=`precision highp float；可变高矢量2 vTextureCoord；可变低通vec4彩色；均匀取样器；统一布尔-奥斯特文本；void main（void）{if（aUseText）{gl_FragColor=texture2D（uSampler，vtexturecord）；}else{gl_FragColor=vColor；}}}；
const VERTEX_SHADER=`attribute vec4；属性向量4；颜色；属性向量2编码；均匀mat4 uModelViewMatrix；均匀mat4映射矩阵；一致mat3矩阵；均匀的浮点数；可变低通vec4彩色；可变高矢量2 vTextureCoord；void main（void）{gl_PointSize=uPointSize；gl_Position=uProjectionMatrix*uModelViewMatrix*aVertexPosition；vColor=aVertexColor；vTextureCoord=（vec3（atexturecord，1）*uTextMatrix）.xy；}；
函数onResize（元素，回调）{
让element高度=element.height，
elementWidth=element.width；
setInterval（函数（）{
if（element.height！==elementHeight | | element.width！==elementWidth）{
element高度=element.height；
elementWidth=element.width；
回调（）；
}
}, 16);
}
mat4.moveToVec3=功能（输出，v）{
out[12]=v[0]；
out[13]=v[1]；
out[14]=v[2]；
};
阶级性{
构造函数（）{
this.matrix=mat4.create（）；
this.coords=vec3.create（）；
}
翻译（newCoords）{
常数{
矩阵，
坐标
}=这个；
翻译（矩阵，矩阵，新坐标）；
vec3.复制（coords，[matrix[12]，matrix[13]，matrix[14]]；
归还这个；
}
移动（新坐标）{
常数{
矩阵，
坐标
}=这个；
vec3.复制（coords，newCoords）；
mat4.moveToVec3（矩阵、坐标）；
归还这个；
}
}
类纹理{
构造函数（）{
this.matrix=mat3.create（）；
this.image=未定义；
该宽度=未定义；
该高度=未定义；
这是旋转=0；
这个。y=0；
这个.x=0；
设onload=function（）{}；
Object.defineProperty（这是“onload”{
得到（）{
空载返回；
},
设置（值）{
如果（已加载此文件）{
value（）；
}否则{
onload=值；
}
}
});
this.loaded=false；
}
设置（图像、y、宽度、高度、矩阵、旋转）{
这个图像=图像；
这个。y=y；
这个。宽度=宽度；
高度=高度；
这是旋转=0；
这个.x=0；
if（矩阵）{
这个矩阵=矩阵；
如果（旋转）{
这个旋转=旋转；
}
}
this.loaded=true；
}
静态源（纹理）{
const newTexture=新纹理（）；
常数{
形象,，
Y
宽度，
高度，
矩阵，
旋转
}=纹理；
设置（图像、y、宽度、高度、mat3、克隆（矩阵）、旋转）；
返回新文本；
}
刻度（w，h）{
常数矩阵=此矩阵；
mat3.标度（矩阵，矩阵[w，h]）；
}
旋转（rad）{
常数矩阵=此矩阵；
this.rotation=（this.rotation+rad）%（Math.PI*2）；
mat3.旋转（矩阵，矩阵，rad）；
}
}
类摄影机扩展了WebglEntity{
构造函数（fieldOfView、aspect、zNear、zFar）{
超级（）；
this.projection=mat4.perspective（mat4.create（），fieldOfView，aspect，zNear，zFar）；
}
瞧（瞧）{
常数{
矩阵，
投影，
坐标
}=这个；
看（马）