Animate Scene from Scroll Position EZPZ

Demos and projects
21

In abovementioned link I can see only grey scene with no meshes (Inspector tells that Ybot is somewhere in the scene).

image
image1372Ɨ867 74.5 KB

22

hit refresh again its a timing thing with the playground, or scroll after clicking on the canvas.

Normally you would not be injecting it into a script in a script in a scriptā€¦
Wait what the heckā€¦ hmm it was working give me a second.

Ohh its something nutty with the render, hit f12 then click on the scene and he will pop up.

Ideally you would not be doing this in a playground, it makes it really hacky. use a refresh as well instead of play because for some reason its not killing the old flags and there are conflicts with hitting play a bunch.

1 Like
23

Did you have any success with scrolling with usual Babylon-created mesh (sphere or box etc)?
(Just to split the problem of meshes import and the problem of meshes scrolling).

24

I bet for him its a scope thing, just does not know how to access the variable they want inside their callback.

1 Like
25

I think itā€™s better to put on GitHub :slight_smile:

26

Meshes I create in Babylon are working. Itā€™s just the ones Iā€™m importing

27

In this case could you provide working repro with scrolling? Iā€™ll try to mport some mesh into it properly :slight_smile:

1 Like
28

Okay so I basically took Prymes example and put your code into it:D

Thank you already! Trying to figure this out for so long alreadyā€¦

1 Like
29

ez way is to just set scene.sphere = newMeshes[0];
though that might not be ideal.

Better way would be to just make your flag inside this callback ad target the ball.

BABYLON.SceneLoader.ImportMesh("",...

var flag = scroll.addFlag(newMeshes[0], {
			start:0,
			duration:1000,
			callback: (value, target)=>{
				target.position.x = -5 + (value * 10)
				target.getScene().getActiveCamera().setTarget(target.position) <- this line might not be right....
			},
			startDirty : true,
			debug:true
		})
2 Likes
30

Itā€™s working! Thank you so much!!!
Also so many thanks to @labris, you both really helped me with this!
Stay safe guys

2 Likes
31

Hi tomā€¦
Do you have a link with the finall result?
Iā€™am trying to acomplish something with the mouse wheel interaction.

Does that githubā€¦ runs as an example?
thanks!

32

scroll.js - Basic Example ā† full example
scroll.js - Babylon JS Example
scroll.js - Babylon JS Example 2

you can really animate anything with it, if you are looking for examples here is a pretty good one.

4 Likes
33

I used an adaptation of @Pryme8ā€™s scrolls.js in something recently and it worked great!

2 Likes
34

If you have improvements you would like to see by all means make a PR. If its for the greater good Ill merge it!

35

@Pryme8 It might be a bit hard to merge as I converted to TypeScript and made the scroll zones breakpoint aware (with a separate class of mine).

But if you like I could send you the code?

1 Like
36

Dude hell yeah, lets upgrade it to ts. <3

I actually made it in a afternoon for a live presentation so any after thought is much appreciated.

If you are so inclined to do that PR ill for sure include you in the credits.

37

Here you go @Pryme8. Sorry for the raw archive - I literally just ripped this out of a large private project.
ScrollObserver.zip (3.5 KB)

Thereā€™s only the one static method in Utils.ts that is used in this case, so ignore the other methods.

Basically same principle as your original but I needed breakpoint support so I made a breakpoint observer and you use everything like this:

        scrollObserver.addZone("zone name", null, {
            ranges: [
                { breakpoint: "md", start: 0, end: 1000 }
                { breakpoint: "lg", start: 1000, end: 2000 }
            ],
            debug: true,
            onEnter: (target) => {
                // Do stuff.
            },
            onLeave: (target) => {
                // Do stuff.
            },
            onUpdate: (value, target) => {
                // Do stuff with value.
            }
        });

Sorry I donā€™t have a simple example as yet, but let me know if you have any questions or problems with it.

2 Likes