pixi.js rotateY 3d карусель - PullRequest
Новая
       8

pixi.js rotateY 3d карусель

0 голосов
/ 14 мая 2018

Кто-нибудь знает, как сделать этот codepen пример в PIXI.js?

Пример сделан с использованием свойств css.Мне нужно это сделать в PIXI, и мне было интересно, если кто-нибудь знает, как это сделать.В следующем коде карусель использует вращение CSSY для поворота ящиков для достижения эффекта «3D».

Спасибо,

ukw 

var boxes = $(".box"),
stage = $(".stage"),
$nav = $("#nav");

var angle = 360 / 13;

TweenLite.set(stage, {
  css: {
    perspective: 1100,
    transformStyle: "preserve-3d"
  }
});

boxes.each(function(index, element) {
  TweenLite.set(element, {
    css: {
      rotationY: index * angle,
      transformOrigin: "50% 50% -420"
    }
  });

  element.dataset.rotationY = index * angle;  
});

$nav.on("click", "#prev", function(){

  TweenMax.staggerTo(boxes, 1, {
    cycle: { rotationY: function(index) {      
      var y1 = +this.dataset.rotationY;
      var y2 = y1 - angle;
      this.dataset.rotationY = y2;
      return y2;
    }},
    // ease: Linear.easeNone
  }, 0);  
});

$nav.on("click", "#next", function(){

  TweenMax.staggerTo(boxes, 1, {
    cycle: { rotationY: function(index) {      
      var y1 = +this.dataset.rotationY;
      var y2 = y1 + angle;
      this.dataset.rotationY = y2;
      return y2;
    }},
    // ease: Linear.easeNone
  }, 0);
});
...