Javascript 全景镜头&x2B；p5js：使用图像混合屏幕功能和用于全景图片的滑块

我有一个问题：如何显示全景图像（可以用鼠标移动，也可以用谷歌的硬纸板移动），它可以有一个滑块来控制两个全景图像之间的图像混合

描述：我正在尝试制作一个应用程序，用户可以看到全景图像并在其中移动（我使用了全景镜头），然后使用滑块可以使图像相互融合。使用屏幕混合功能进行混合（基本上，当滑块移到一侧时，一个全景图中的一些较亮元素开始出现在另一个全景图上-因此，在某种程度上，两个全景图图像同时显示）

我想我找到了一种方法来处理普通矩形图像-我使用p5js库和带有3个滑块的图像混合屏幕功能-它在名为sketch.js的脚本中：

让阳光普照；
让灯1；
让灯2；
函数预加载（）{
DAYLIGHT=loadImage（'../img/OFFICEDL.JPG'）；
LAMPS1=loadImage（'../img/OFFICEL2.JPG'）；
LAMPS2=loadImage（'../img/OFFICEL1.JPG'）；
}
函数设置（）{
canvas=createCanvas（1200600）.parent（“recimage”）；
日光。调整大小（1200600）；
灯1.调整大小（1200600）；
灯2.调整大小（1200600）；
DLslider=createSlider（0，255，0）.parent（'sliderImage'）；
DLslider.position（10,0）.parent（'sliderImage'）；
DLslider.style（'width'，'200px'）；
L1slider=createSlider（0，255，0）.parent（'sliderimage'）；
l1滑块。位置（10，30）。父对象（'sliderImage'）；
l1.style（'width'，'200px'）；
L2slider=createSlider（0，255，0）.parent（'sliderImage'）；
L2slider.位置（10,60）.父对象（'SlidesImage'）；
L2slider.style（'width'，'200px'）；
}
函数绘图（）{
背景（0）；
混合模式（屏幕）；
常量DLvalue=DLslider.value（）；
常量L1value=L1slider.value（）；
常量L2value=L2slider.value（）；
色调（255，255 DLvalue）；
图像（日光，0,0）；
色调（255，L1值）；
图像（灯1,0,0）；
色调（255，L2值）；
图像（灯2,0,0）；
blendMode（BLEND）；
}