How to continually update the image src of a PIXI.Sprite(resources.image.texture) on scroll?

jtruax303 · March 19, 2019

I am trying to constantly update the source of my PIXI.Sprite(resources.image.texture) to match the source of the image that has entered the viewport, while keeping the same displacement map running constantly.

Please tell me if this is not possible, or if there is a better solution. If you need more information please ask and I will happily provide it to my best ability. I am new to Pixi.js too so some code examples would be great. Thank you!

I will post the relevant html and javascript below to my most recent (failed) attempt. Here is the link to said project.

Here is the link to a semi-working version where the background is not changing as an example of what the displacement map should look like.

HTML:


<body>

<article class="image section">
  <img src="book1.png">
</article>
<article class="image section">
  <img src="book2.png">
</article>
<article class="image section">
  <img src="book3.png">
</article>
<article class="image section">
  <img src="book4.png">
</article>
<article class="image section">
  <img src="book5.png">
</article>
<article class="image section">
<img src="book1.png">
</article>
<article class="image section">
<img src="book2.png">
</article>
<article class="image section">
<img src="book3.png">
</article>
<article class="image section">
<img src="book4.png">
</article>
<article class="image section">
<img src="book5.png">
</article>
<article class="image section">
<img src="book1.png">
</article>
<article class="image section">
<img src="book2.png">
</article>
<article class="image section">
<img src="book3.png">
</article>
<article class="image section">
<img src="book4.png">
</article>
<article class="image section" section>
<img src="book5.png">
</article>

</main>



<section class="one">
</section>

JS:

const sectionTag = document.querySelector('section')
const articleTags = document.querySelectorAll('article')
const bodyTag = document.querySelector('body')
const pixels = window.pageYOffset
const pageHeight = bodyTag.getBoundingClientRect().height

let originalImage = null
let originalImageSource = null

sectionTag.innerHTML = ''

// Set up a pixi application
const app = new PIXI.Application({
  width: 2000,
  height: 2000,
  transparent: true
})

// Add the pixi application to the section tags
sectionTag.appendChild(app.view)

// Make image equall nothing
let image = null
let displacementImage = null
let displacementImage2 = null

// Make a new loader
const loader = new PIXI.loaders.Loader()

// Load in our image
loader.add('image', originalImageSource)
loader.add('displacement', 'displacement3.jpg')
loader.add('displacement2', 'displacement1.jpg')
loader.load((loader, resources) => {
  // Once the image has loaded, now do this
  image = new PIXI.Sprite(resources.image.texture)
  displacementImage = new PIXI.Sprite(resources.displacement.texture)
  displacementImage2 = new PIXI.Sprite(resources.displacement2.texture)

  image.width = 2000
  image.height = 2000
  image.interactive = true

  image.anchor.y = -0.1

  displacementImage.width = 1000
  displacementImage.height = 1000
  displacementImage2.width = 1000
  displacementImage2.height = 1000
  displacementImage.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT
  displacementImage2.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT

  image.filters = [
    new PIXI.filters.DisplacementFilter(displacementImage, 200),
    new PIXI.filters.DisplacementFilter(displacementImage2, 50)
  ]
  
  // Add the image to the app
  app.stage.addChild(image)
  app.stage.addChild(displacementImage)
  app.stage.addChild(displacementImage2)

  // add rotation
  app.ticker.add(() => {
    displacementImage.x = displacementImage.x + 0.5
    displacementImage2.x = displacementImage2.x - 0.5
  })
})

articleTags.forEach(article => {
document.addEventListener("scroll", function () {
    if(article.offsetTop - 200 <= pixels){
      originalImage = article.querySelector("img")
      originalImageSource = originalImage.getAttribute("src")
    }
})
})

Sign In

How to continually update the image src of a PIXI.Sprite(resources.image.texture) on scroll?

Recommended Posts

jtruax303

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity