dotun1

Members
  • Content Count

    2
  • Joined

  • Last visited

  1. Hi ivanpopelyshev, thanks for your respond I have added the code to mine see below but still did not work also create a codepen https://codepen.io/onseyi/pen/XWdBjOW let app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight, antialias: true ,transparent: true}); document.getElementById('display').appendChild(app.view); img.anchor.set(0.5); //center of image img.position.set(app.screen.width/2, app.screen.height/2); img.scale.set(img.texture.width / app.screen.width, img.texture.height / app.screen.height); let img = new PIXI.Sprite.from("images/ban3.jpg"); img.width = window.innerWidth; img.height = window.innerHeight; app.stage.addChild(img); depthMap = new PIXI.Sprite.from("images/ban3-map.jpg"); app.stage.addChild(depthMap); displacementFilter = new PIXI.filters.DisplacementFilter(depthMap); app.stage.filters = [displacementFilter]; window.onmousemove = function(e) { displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX) /20; displacementFilter.scale.y = (window.innerHeight / 2 - e.clientY) /20; };
  2. I am trying to implement a 3D photo which I found here (redstapler.co/3d-photo-from-image-javascript-tutorial ) which works, but I want the background image to cover and fit also but be responsive, I will appreciate if you can work on my code I am a newbie in pixiJS and canvas. canvas{ width: 100%; height: 100vh; } #display{ width: 100%; height: 100vh; } <div id="display"></div> let app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight, antialias: true ,transparent: true}); document.getElementById('display').appendChild(app.view); let img = new PIXI.Sprite.from("images/ban3.jpg"); img.width = window.innerWidth; img.height = window.innerHeight; app.stage.addChild(img); depthMap = new PIXI.Sprite.from("images/ban3-map.jpg"); app.stage.addChild(depthMap); displacementFilter = new PIXI.filters.DisplacementFilter(depthMap); app.stage.filters = [displacementFilter]; window.onmousemove = function(e) { displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX) /20; displacementFilter.scale.y = (window.innerHeight / 2 - e.clientY) /20; };