如何在javascript中调用多个平面？

在过去的一周里，我一直在试图解决我的网站的一个问题，但没有成功。我使用的是events.js，我只想在主页上显示多个平面。我已经让它工作了，但是在第一次移动之后，每一个平面都会重叠。我已经在其他shopify主题上测试了代码，并且只有第一个平面正确显示。任何帮助都将不胜感激

addEventListener（“加载”，函数（）{
var窗帘=新窗帘({
容器：“平面画布”
});
var planeEls=document.getElementsByClassName（“平面”）；
var vs=`ifdef GL#ES
精密中泵浮子；
#恩迪夫
//默认强制属性
属性向量3；
属性向量2编码；
//这些投影矩阵和模型视图矩阵由库生成
//它将根据其HTML元素CSS值来定位和调整飞机的大小
均匀mat4-uMVMatrix；
一致mat4上矩阵；
//纹理坐标将被传递到片段着色器
可变向量2 vTextureCoord；
void main（）{
//基于投影矩阵和模型视图矩阵应用顶点位置
gl_位置=上矩阵*UMV矩阵*vec4（1.0）；
//变化的
//使用纹理矩阵和原始纹理坐标生成精确的纹理坐标
vTextureCoord=ATextureCord；
}`;
var fs=`
#国际财务报告准则
精密中泵浮子；
#恩迪夫
//把我们的车开走
可变的vec3-vVertexPosition；
可变向量2 vTextureCoord；
//我们在javascript中声明的制服
均匀浮动时间；
//我们的纹理采样器（默认名称，若要使用其他名称，请参阅文档）
纹理均匀；
void main（）{
//获取我们的纹理坐标
vec2 textureCoord=vTextureCoord；
//基于时间均匀和纹理UV沿两个轴置换像素
//这将创建一种水面效果
//尝试注释一行或更改常量，以查看它如何更改效果
//提醒：纹理坐标在两个轴上的范围为0.0到1.0
常数浮点PI=3.141592；
TextureCord.x+=(
sin（textureCoord.x*10.0+（（uTime*（PI/10.0））*0.031））
+sin（textureCoord.y*10.0+（（uTime*（PI/10.489））*0.047））
) * 0.0075;
TextureCord.y+=(
sin（textureCoord.y*15.0+（（uTime*（PI/10.023））*0.023））
+sin（textureCoord.x*15.0+（（uTime*（PI/10.1254））*0.067））
) * 0.0125;
gl_FragColor=纹理2D（平面纹理，纹理命令）；
}
`;
var平面=[]；
功能手柄（索引）{
变量平面=平面[指数]；
飞机
.onReady（函数（）{
//我们的纹理已加载，请调整飞机大小！
plane.planeResize（）；
})
.onRender（函数（）{
平面。制服。时间。值++；
});
}
对于（变量i=0；i

#平面画布{
位置：固定；
排名：0；
左：0；
宽度：100%；
高度：100vh；
指针事件：无；
}
.飞机{
背景色：#000；
保证金：0自动；
}
/***这些图像将定义我们飞机的高度***/
.飞机img{
显示：块；
宽度：100%；
高度：自动；
/*隐藏原始图像*/
不透明度：0；
背景色：#000；
}