Panolens + p5 js: использование функции СМЕШИВАНИЕ ЭКРАНА изображений с СЛАЙДЕРАМИ для изображений PANORAMA - PullRequest
Новая
       122

Panolens + p5 js: использование функции СМЕШИВАНИЕ ЭКРАНА изображений с СЛАЙДЕРАМИ для изображений PANORAMA

1 голос
/ 05 августа 2020

У меня следующий вопрос: как показать панорамные изображения (которые можно перемещать с помощью мыши или в картонных гуглах), которые могут иметь ползунки, управляющие смешиванием изображения между двумя панорамами?

Описание: Я пытаюсь создать приложение, в котором пользователь может видеть панорамное изображение и перемещаться по нему (я использовал для этого PANOLENS), а затем с помощью ползунков можно заставить изображения смешиваться друг с другом. Смешивание выполняется с помощью функции SCREEN BLEND (в основном, когда ползунки перемещаются в одну сторону, некоторые более яркие элементы из одной панорамы начинают появляться на другой панораме - так что в некотором смысле два панорамных изображения отображаются одновременно).

Думаю, я нашел способ сделать это для обычных изображений rect angular - я использую библиотеку p5 js с функцией IMAGE BLEND SCREEN с 3 ползунками - это есть в скрипте под названием sketch. js : 

let DAYLIGHT;
let LAMPS1;
let LAMPS2;

function preload() {
  DAYLIGHT = loadImage('../img/OFFICEDL.JPG');
  LAMPS1 = loadImage('../img/OFFICEL2.JPG');
  LAMPS2 = loadImage('../img/OFFICEL1.JPG');
}
function setup() {
  canvas = createCanvas(1200,600).parent("recimage");
  DAYLIGHT.resize(1200,600);
  LAMPS1.resize(1200,600);
  LAMPS2.resize(1200,600);
  DLslider = createSlider(0, 255, 0).parent('slidersimage');
  DLslider.position(10, 0).parent('slidersimage');
  DLslider.style('width', '200px');
  L1slider = createSlider(0, 255, 0).parent('slidersimage');
  L1slider.position(10, 30).parent('slidersimage');
  L1slider.style('width', '200px');
  L2slider = createSlider(0, 255, 0).parent('slidersimage');
  L2slider.position(10, 60).parent('slidersimage');
  L2slider.style('width', '200px');

}

function draw() {
  background(0);
      blendMode(SCREEN);
const DLvalue = DLslider.value();
const L1value = L1slider.value();
const L2value = L2slider.value();
  tint(255, 255-DLvalue);
  image(DAYLIGHT,0,0);
  tint(255, L1value);
  image(LAMPS1,0,0);
  tint(255, L2value);
  image(LAMPS2,0,0);
  blendMode(BLEND);

}

Теперь для отображения панорам я использовал только рабочий процесс из учебника для отображения панорамы, и для этого я загружаю три. Мин. js и panolens. js, и, наконец, в главном скрипте. js Я использую, чтобы приложение отображало панораму: 

const panoImage = document.querySelector('.pano-image');
const testPano1 = '../img/OFFICEDL.jpg';
const panorama = new PANOLENS.ImagePanorama(testPano1);
const viewer = new PANOLENS.Viewer({
    container: panoImage,
});

viewer.add( panorama );

Наконец, в моем html это выглядит так: 

<!DOCTYPE html><html><head>

    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">

  </head>
  <body>
    
  
    <h1> PANORAMA TEST</h1>
    <p>
        This is the panorama view of the room
    </p>
    <div class="centering">
    <div class="pano-image"> </div>
    </div>
    <p>
        This is the stretched out panorama (equirectangular image view) with adjustable level of lighting
    </p>
    <div class="centering">
    <p id="recimage"></p>
    <p id="slidersimage"></p>
    </div>
    <p>
     End text
  </p>
  
    <script src="js/p5.js"></script>
    <script src="js/sketch.js"></script>
    <script src="js/three.min.js"></script>
    <script src="js/panolens.min.js"></script>
    <script src="js/main.js"></script>
      
    

</body></html>

На данный момент в целом есть панорамное изображение вверху и его эквивалентная angular версия внизу, которая управляется ползунками. Есть ли способ реализовать аналогичный элемент управления для версии Panorami c?

Также, побочный вопрос: кажется, что мои ползунки позиционируются не относительно холста, а, скорее, для всего веб-сайта ... у кого-нибудь есть какие-нибудь советы по этому поводу?

Любая помощь будет принята с благодарностью!

...