Как бы я изменил это из двух жестко закодированных изображений в массив изображений. - PullRequest
Новая
       18

Как бы я изменил это из двух жестко закодированных изображений в массив изображений.

0 голосов
/ 17 сентября 2018

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

Вот ручка

Я пытался добавить 

var slide3 = new Slide(width, height, 'middle');
    var l3 = new THREE.ImageLoader();
    l3.setCrossOrigin('Anonymous');
    l3.load('/assets/ScreenSaver/space3.jpg', function(img) {
        slide3.setImage(img);
    })
        
    root.scene.add(slide3);

Но это не обрезает, кажется, мне нужно добавить еще одну переменную управления.

Любые советы или рекомендации будут оценены.

Ответы [ 3 ]

0 голосов
/ 17 сентября 2018

Лучший способ сделать это - создать переменную, представляющую собой массив, в котором каждый элемент является источником изображения, а затем загрузить их динамически. Таким образом, вам нужно только один раз записать этот фрагмент. Каждый раз, когда вы хотите добавить новое изображение, вынуть его или изменить порядок, вам нужно только отредактировать массив изображений. 

var images = ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/winter.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/spring.jpg'];
  
for (let x = 0; x < images.length; x++) {
  var slide[x] = new Slide(width, height, 'out');
  var l[x] = new THREE.ImageLoader();
  l[x].setCrossOrigin('Anonymous');
  l[x].load(images[x], function(img) {
    slide.setImage(img);
  })
  root.scene.add(slide);

  tl.add(slide[x].transition(), 0);
};
0 голосов
/ 18 сентября 2018

Закончив с помощью этого, кто-то достиг этого в реакции и, к счастью для меня, у меня тоже есть та же цель.

Раствор 

loadNextImages (images, index) {
let first = index
let second
const tmp = (first + 1) % (images.length)
if (index % 2 === 0) {
  second = tmp
} else {
  second = first
  first = tmp
}
this.slide0.setImage(images[first])
this.slide1.setImage(images[second])
return tmp
0 голосов
/ 17 сентября 2018

Чтобы добавить еще один слайд, попробуйте следующее: 

      var slide3 = new Slide(width, height, 'in');
  var l3 = new THREE.ImageLoader();
    l3.setCrossOrigin('Anonymous');
    l3.load('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-5w-Kdidn-qT7gkRKDgQzFmCULZQN-YvwFchCenzPVIkggTif1Q', function(img) {
        slide3.setImage(img);
    })

root.scene.add(slide3);
  tl.add(slide3.transition(), 0);

Вы пропустили последнюю строку.Проверьте это, работая с дополнительным изображением здесь:

https://codepen.io/pmbranco/pen/gdBmyR

...