Javascript-画布图像转换多维数据集

我有一个脚本，它通过一个画布WebGL创建了一个3D立方体。我想在立方体的一个面上添加一个图像。然而，我有一些困难来找到正确处理图像变换的方法，以便将图像放在立方体面上

下面是一个脚本，它通过立方体的每个面循环以生成线条：

canvas.ctx.beginPath();
canvas.ctx.moveTo( this.p0.X, this.p0.Y );
canvas.ctx.lineTo( this.p1.X, this.p1.Y );
canvas.ctx.lineTo( this.p2.X, this.p2.Y );
canvas.ctx.lineTo( this.p3.X, this.p3.Y );
canvas.ctx.closePath();

我不知道如何从我的点计算变换。。。要添加与立方体有关的变换图像，请执行以下操作：

canvas.ctx.save();
canvas.ctx.textAlign = 'center';
canvas.ctx.fillStyle = "black"
canvas.ctx.fillText('text',this.p0.X + ((this.p1.X - this.p0.X)/2), this.p0.Y + ((this.p1.Y - this.p0.Y)/2));
var img = new Image();
img.src = url;
canvas.ctx.drawImage(img, this.p0.X, this.p0.Y, fl, fl);
canvas.ctx.transform(a, b, c, d, e, f);
canvas.ctx.restore();

---

我想这更像是一个数学问题。

你甚至在使用“WebGL”吗？在我看来，你似乎在使用“2d”上下文。我没有看到任何“WebGL”画布方法。我在立方体上使用了一些WebGL照明。图像是在2d环境中绘制的，我只需要对其进行变换。如果您已经有了用于照明的webgl环境，为什么不直接使用webgl绘制立方体并将此图像作为纹理应用于其上？这是webgl的工作，即使您可能尝试使用2d ctx来破解某些东西。此外，你不必等待你的img加载后再尝试绘制它+你正在设置上下文的转换后，你的绘图已经完成。。。