pixijs 3d over 2d - take 2

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-projection.min.js"></script>
<div style="display: flex;">
<input max="0" min="-90" value="-90" id="slider" type="range" list="tickmarks" />

<!-- <datalist id="tickmarks">
    <option value="-180"></option>
    <option value="-90"></option>
       <option value="-45"></option>
  <option value="0"></option>
    <option value="45"></option>
 <option value="90"></option>
    <option value="180"></option>
</datalist> -->

  <input type="radio" id="y-axis" name="axis" value="y" checked>
  <label for="male">Y-axis</label>
  <input type="radio" id="x-axis" name="axis" value="x">
  <label for="female">X-axis</label>
</div>

CSS

input#slider {
  width: 50%;
}

canvas{
   width: 100%;
   height: 600px;
}

JavaScript

const elements = [{
    src: "https://s3.ap-south-1.amazonaws.com/republic-invideo/girl_1612460383229.png",
    width: 300,
    height: 500,
    x: 0,
    y: 0,
    perspective: 2000
  },
  {
    src: "https://s3.ap-south-1.amazonaws.com/republic-invideo/girl_1612460546360.png",
    width: 500,
    height: 300,
    x: 320,
    y: 40,
    perspective: 2000
  }, {
    src: "https://media.gettyimages.com/vectors/two-women-jump-and-highfive-each-other-vector-id1207202567?b=1&k=6&m=1207202567&s=612x612&w=0&h=4aSgSDLbwYuUYEi7Kb1bd2oTitPYsRb24NMgyqi2MW4=",
    width: 200,
    height: 200,
    x: 320,
    y: 360,
    perspective: 3000
  }
];

let selected = "y";
const app = new PIXI.Application({
  width: document.body.clientWidth,
  height: 600,
  backgroundColor: 0xCCCCCC,
  antialias: true,
  resolution: 2
})

document.body.appendChild(app.view);
const applyPivot = true;

const construct = element => {
  const width = element.width;
  const height = element.height;

  const sprite = PIXI.Sprite.from(element.src);
  sprite.width = width;
  sprite.height = height;

  const basic = new PIXI.Container();
  basic.width = width;
  basic.height = height;
  basic.addChild(sprite);


  const container = new PIXI.Container();
  container.convertTo3d();
  container.width = width;
  container.height = height;


  if (applyPivot) {
    container.pivot3d.y = height * 0.5;
    container.pivot3d.x = width * 0.5;
    container.position3d.y = container.position3d.y + (height * 0.5);
    container.position3d.x = container.position3d.x + (width * 0.5);
    container.proj.cameraMode = true;
  }

  container.addChild(basic);
  container.convertSubtreeTo3d();
  var camera = new PIXI.projection.Camera3d();
  camera.width = width;
  camera.height = height;
  camera.setPlanes(element.perspective);

  camera.position3d.set(width / 2, height / 2);
  camera.x = element.x + width / 2;
  camera.y = element.y + height / 2;

  camera.addChild(container);
  app.stage.addChild(camera);
  return...