JSFiddle - React, Tailwind, and code Playground

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="1" min="0" value="1" step="0.01" id="slider" type="range" />
</div>

CSS

input#slider {
  width: 50%;
}

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

JavaScript

const elements = [{
    src: "https://s3.ap-south-1.amazonaws.com/republic-invideo/_1609225834773.png",
    width: 300,
    height: 500,
    x: 0,
    y: 0,
    perspective: 2000
  }
];

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.convertTo3d();
  sprite.width = width;
  sprite.height = height;

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


  if (applyPivot) {
    container.pivot3d.y = height;
    container.pivot3d.x = width;
   container.position3d.y = container.position3d.y + (height);
   container.position3d.x = container.position3d.x + (width);
  }
	console.log(container);
  container.addChild(sprite);
  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 container;
}

const containerHolder = elements.reduce((acc, element) => {
  let ele = construct(element);
  acc.push(ele);
  return acc;
}, [])

document.getElementById("slider").oninput = e => {
  let value = e.target.value;
  containerHolder.forEach(it => {
   	it.scale3d.x = value;
  })
}