Arlorean · May 5, 2020 14:54
diff --git a/3d-thumbnail-test.markdown b/3d-thumbnail-test.markdown
diff --git a/index.html b/index.html
 <div id="main-div">
  <div id="image-div">

  </div>
 </div>
diff --git a/script.js b/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;
 	};
 }


diff --git a/scripts b/scripts
 <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.4/pixi.min.js"></script>
diff --git a/style.css b/style.css
 #main-div {
    display: flex;
    align-items: center;
    justify-content: center;
    width:100vw;
    height:100vh;
 }
	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;
	};
	}
No results found