3D Thumbnail Test

3d-thumbnail-test.markdown

3D Thumbnail Test

Try to create something similar to Facebook's 3D Photos

A Pen by Adam Davidson on CodePen.

License.

index.html

<div id="main-div">
  <div id="image-div">

  </div>
</div>

script.js

let width = 512;
let height = 512;

let app = new PIXI.Application({width: width, height: height});
app.loader
  .add("image", "https://i.imgur.com/v7jhphG.png", {crossOrigin: '*'})
  .add("depth", "https://i.imgur.com/kBndZkn.png", {crossOrigin: '*'})
  .load(assetsLoaded);

function assetsLoaded(loader, resources) {
  let div = document.getElementById('image-div');
  div.appendChild(app.view);
  
  let image = new PIXI.Sprite(resources.image.texture);
  image.width = width;
  image.height = height;
  app.stage.addChild(image);
  
  let depth = new PIXI.Sprite.from(resources.depth.texture);
  app.stage.addChild(depth);
  
  displacementFilter = new PIXI.filters.DisplacementFilter(depth);
  app.stage.filters = [displacementFilter];
  
  document.body.onmousemove = function(e) {
      displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX)/5;
      displacementFilter.scale.y = (window.innerHeight / 2 - e.clientY)/5;
	};
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.4/pixi.min.js"></script>

style.css

#main-div {
    display: flex;
    align-items: center;
    justify-content: center;
    width:100vw;
    height:100vh;
}