PIXI coords v.4.0.0

by Artur Vardanyan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.js"></script>
<script src="https://raw.githubusercontent.com/pixijs/pixi-display/layers/dist/pixi-layers.js"></script>

JavaScript

// This examples is hard
// To understand it, you have to carefully read all readme`s and other examples of respective plugins
// Be ready to study the plugins code. Please use latest version of those libs
// Used plugins: pixi-projection, pixi-display

console.log( PIXI.display)

var app = new PIXI.Application(800, 600, {resolution: 1, autoStart: false, antialias: true });
document.body.appendChild(app.view);
app.stage = new PIXI.display.Stage();

var loader = app.loader;
loader.baseUrl = 'https://pixijs.io/examples/#/projection/required/assets/proj';

var camera = new PIXI.projection.Camera3d();
camera.position.set(app.screen.width / 2, app.screen.height / 2);
camera.setPlanes(350, 30, 10000);
camera.euler.x = Math.PI / 5.5;
app.stage.addChild(camera);

var cards = new PIXI.projection.Container3d();
cards.position3d.y = -50;
// MAKE CARDS LARGER:
cards.scale3d.set(1.5);
camera.addChild(cards);

var shadowGroup = new PIXI.display.Group(1);
var cardsGroup = new PIXI.display.Group(2, function (item) {
    item.zOrder = item.getDepth();
    item.parent.checkFace();
});

// Layers are 2d elements but we use them only to show stuff, not to transform items, so its fine :)
camera.addChild(new PIXI.display.Layer(shadowGroup));
camera.addChild(new PIXI.display.Layer(cardsGroup));
//we could also add layers in the stage, but then we'll need extra layer for the text

// load assets
loader.add('cards', 'casino/cards.json');
loader.add('table', 'casino/table.png');
loader.load(onAssetsLoaded);

// blur for shadow. Do not use it in production, bake shadow into the texture!
var blurFilter = new PIXI.filters.BlurFilter();
blurFilter.blur = 0.2;

function CardSprite() {
    PIXI.projection.Container3d.call(this);
    let tex = loader.resources['cards'].textures;

    //shadow will be under card
    this.shadow = new PIXI.projection.Sprite3d(tex["black.png"]);
    this.shadow.anchor.set(0.5);
    this.shadow.scale3d.set(0.98);
    this.shadow.alpha = 0.7;
    //TRY IT WITH...