Jump to content
Search Community

Pinned Three.js OBJ disappear

VOLTARII_MATTI test
Moderator Tag

Go to solution Solved by Dipscom,

Recommended Posts

Hi there,

 

first of all, GSAP is amazing! I am happy that I found it for myself and unfortunately only regret that I only discovered it now.

At the beginning I have two questions and I hope you can help me:

 

1 / Using the airplane example https://cdpn.io/ste-vg/pen/GRooLza?editors=1010 , I had the idea that a smartphone (for the example I took the airplane from the example) flies over two div areas and then pinned to the second but remains visible. Unfortunately it disappears instead of stopping. Why is that?

 

2 / Is there a  way to texture map the OBJs materials? I want to run a video on the smartphone screen. Or is that a topic for the OBJLoader.js or Three.js?


Many thanks in advance!

See the Pen WNoevqy by voltarii_matti (@voltarii_matti) on CodePen

Link to comment
Share on other sites

Hey VOLTARII_MATTI and welcome to the GreenSock forums.

 

15 minutes ago, VOLTARII_MATTI said:

only regret that I only discovered it now

At least you found it now! 

 

16 minutes ago, VOLTARII_MATTI said:

it disappears instead of stopping. Why is that?

I think you should spend a bit more time to understand how things are set up in that pen. For instance you're trying to pinned an element that is already fixed - that doesn't make much sense. If you remove the pin: true it probably works the way that you're wanting it to, yes?

 

17 minutes ago, VOLTARII_MATTI said:

Is there a  way to texture map the OBJs materials? I want to run a video on the smartphone screen. Or is that a topic for the OBJLoader.js or Three.js?

Sorry, that's a bit off topic for these forums (which are focused on GSAP).

  • Like 1
Link to comment
Share on other sites

7 minutes ago, ZachSaucier said:

Hey VOLTARII_MATTI and welcome to the GreenSock forums.

 

At least you found it now! 

 

I think you should spend a bit more time to understand how things are set up in that pen. For instance you're trying to pinned an element that is already fixed - that doesn't make much sense. If you remove the pin: true it probably works the way that you're wanting it to, yes?

 

Sorry, that's a bit off topic for these forums (which are focused on GSAP).

 

Thank you for the fast feedback.

Yes, even without a pin: true it doesn't work as intended. Because then the plane does not stay pinned in the second div but also goes over the third div. Do you understand what I mean?

 

See the Pen poNzgby by voltarii_matti (@voltarii_matti) on CodePen

Link to comment
Share on other sites

  • Solution

Hey VOLTARII_MATTI,

 

Again, welcome to the forums!

 

You got your CSS rules mixed up. If you want the canvas element to scroll up when scrollTrigger unpins it, you cannot have it with a position:fixed in CSS, else, it will stay fixed. You need to use position:absolute.

 

As for your question on the OBJ, Zach is the law here when he says the forums are focused on GSAP but we are allowed to give away pointers towards more information and/or solutions. You can have textures mapped into an OBJ file yes. But, if you are asking that, you probably want to learn how to do that. I would suggest you do a quick look up on exporting files from Blender, there will be tutorials out there showing how to export assets and their textures for the web.

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

11 minutes ago, Dipscom said:

Hey VOLTARII_MATTI,

 

Again, welcome to the forums!

 

You got your CSS rules mixed up. If you want the canvas element to scroll up when scrollTrigger unpins it, you cannot have it with a position:fixed in CSS, else, it will stay fixed. You need to use position:absolute.

 

As for your question on the OBJ, Zach is the law here when he says the forums are focused on GSAP but we are allowed to give away pointers towards more information and/or solutions. You can have textures mapped into an OBJ file yes. But, if you are asking that, you probably want to learn how to do that. I would suggest you do a quick look up on exporting files from Blender, there will be tutorials out there showing how to export assets and their textures for the web.

 

Hi Dipscom,

 

position: absolute - that's it really!

 

And thank you for pointing out the texture export! I´ll look for tutorials.

Many thanks for the help! You are fantastic

 

Kind regards, Matti

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...