ScrollTrigger & ThreeJS - Content over Canvas

[Tonycre8]

Good afternoon guys. I've been on this little issue of mine for about 3+ weeks now, and I'm getting a little sick of it.

Basically, I'm trying to work out how to get GSAP to play nicely with ThreeJS so that I can interact with HTML elements instead of just being greeted with the canvas. Initially you may be thinking that this is a ThreeJS problem rather than a GSAP problem, but I've already ruled that out given that ThreeJS only creates a Canvas. And I've managed to create solutions that alienate that as an issue.

I can't interact with any HTML elements as you can see my furiously try to click on elements in this video. I have managed to cheat the system a little, but it was only a temporary solution. Instead of changing the backgrounds of my slides, I would instead change the background of the parent element.

<div class="parent">
  <div class="car"></div>
  <section class="child slide1"></section>
  <section class="child slide2"></section>
</div>

This worked for about three slides, until the rest of the slides failed to follow the tag rules that I had set on a ref created for the parent element. And when I say it worked for three slides, I mean it didn't.

In this image, you can see that the content of the previous slide hasn't completely disappeared. I added tags and applied them like so to the scrolling animations. It's pinned when the actual animation hasn't been completed. Even though the start times and such lend itself to completing the animation before it pins. The background hasn't fully set itself to the "#fff" colour.

let slide_anim = new gsap.timeline({
      duration: 1,
      scrollTrigger: {
          trigger: "#slide2",
          endTrigger: "#slide5",
          start: "top top",
          end: "+=5000",
          scrub: 1,
          markers: true
      }
    })

slide_anim
    .add("slide1", 0)
    .add("slide2", 10)
    .add("slide3", 20)
    .add("slide4", 30)
    .add("slide5", 40)
// Slide 2
    slide_anim.to(container, {background: "#363636", scrollTrigger: {
      trigger: "#slide2",
      start: "+=1000",
      scrub: 1,
    }}, "slide2")
// Slide 3
    slide_anim.to(container, {background: "#ffffff", scrollTrigger: {
      trigger: "#slide3",
      start: "+=1000",
      scrub: 1,
    }}, "slide3")

I would prefer to have this work where the slides have their own individual colours, and I wouldn't have to manage it through the parent container and it's properties. But one of two things can happen if I try to use the alternative slide method - all to do with layers.

1. The car stays on top of the slides, but none of the html content is accessible because it is behind the car canvas.

2. The html content is accessible, but after you scroll to the first slide, the car disappears behind the rest of the slide in content.

 

I did attach a codepen. But unfortunately I can't get that to work at all. I don't know why it's coming up blank and I don't have the energy to fix it at this point. I can drop a github repo to clone if that would be more helpful.

 

Thanks for your time if you do drop by this thread.

See the Pen XWdMwbN by tonycre8 (@tonycre8) on CodePen

[akapowl]

Hey @Tonycre8

 

Maybe I am missunderstanding this, but if you are not using OrbitControls or anything like that for controlling your 3D Model with the mouse, couldn't you just simply set 'pointer-events: none' to your canvas via CSS?

 

...I did just try that in a model build of mine, and it worked just fine - I could access all the html elements underneath the canvas.

 

See the Pen 435ef35d3cc55387ec5242163215664c by akapowl (@akapowl) on CodePen

 

[Tonycre8]

20 minutes ago, akapowl said:

Hey @Tonycre8

 

Maybe I am missunderstanding this, but if you are not using OrbitControls or anything like that for controlling your 3D Model with the mouse, couldn't you just simply set 'pointer-events: none' to your canvas via CSS?

 

...I did just try that in a model build of mine, and it worked just fine - I could access all the html elements underneath the canvas.

 

 

Well don't I just feel a little stupid? Thanks a lot! Really appreciate it!

[akapowl]

 

Happens to everybody at some point, when projects grow bigger and bigger.

 

In Germany we say 'You cannot see the woods for all the trees in it' - roughly translated.

[ZachSaucier]

15 minutes ago, akapowl said:

In Germany we say 'You cannot see the woods for all the trees in it' - roughly translated.

English has a similar, if not the same phrase: One "can't see the forest for the trees".

[akapowl]

Didn't know that at first. But after I posted, I googled if there was a similar English phrase, and saw that 😅

It is just about the same in German.

[Tonycre8]

It is what it is. Every learning process has it's weird little notches!