Skip to content

Instantly share code, notes, and snippets.

@Arlorean
Created May 5, 2020 14:54
Show Gist options
  • Save Arlorean/c4a60fb1e2eb7b67b432b96375e8da28 to your computer and use it in GitHub Desktop.
Save Arlorean/c4a60fb1e2eb7b67b432b96375e8da28 to your computer and use it in GitHub Desktop.
3D Thumbnail Test
<div id="main-div">
<div id="image-div">
</div>
</div>
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;
};
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.4/pixi.min.js"></script>
#main-div {
display: flex;
align-items: center;
justify-content: center;
width:100vw;
height:100vh;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment