Scroll Pan Effect

Hi all! This tool is super cool- been messing around with it and was able to create a really cool main page even though I am new to both Three JS, Unity, and 3d modeling in general. Wondering if anyone has an example or any tips for implementing the awesome scroll effects that we can see on the main https://needle.tools page. Thanks :smile:

Original Post on Discord

by user 140331708296855552

Hello @ilaffey the code this is in the modules repository. You need Unity >= 2022 for using the Splines package and can use that to move your camera (or anything) along a spline: GitHub - needle-tools/needle-engine-modules

For the website we controlled that from a timeline in Unity (scrolling the page did just set the timeline time). We’ll have a sample for something similar (controlling a timline by scrolling the page) when the next update comes out

Ah ok awesome! That makes sense- should be able to get that going- I just had no clue where to start. Thanks Marcel and really awesome tool you made!

by user 140331708296855552

Great! Send a message here if you run into any blocker

Hmm- I have the spline setup on Unity and I installed the npmdef package. I am confused how I hook into the spline but I could just be tired :sweat_smile:

by user 140331708296855552

I would think I need to be setting it from inside my Javascript (given that it is relative to the scroll bar), but I am not sure…

by user 140331708296855552

Trying to import { SplineWalker } from ‘splines’ gives [plugin:vite:import-analysis] Failed to resolve entry for package "splines". The package may have incorrect main/module/exports specified in its package.json.

by user 140331708296855552

@marcel :cactus: - dont mean to bug you just not sure if you saw this ^

by user 140331708296855552

Hello @ilaffey thanks for the ping, ill try to take a look tomorrow (feel free to ping again otherwise)

Can you try the splines branch in the samples repository ? The 2022 project has a Splines sample scene GitHub - needle-tools/needle-engine-samples: Live: https://engine.needle.tools/samples 🌵 Needle Engine sample scenes - use as examples and as a reference for learning 😊

didnt get your error above - let me know if you also get it in the scene

if so please include the nodejs version and npm versions that you’re using

@marcel :cactus: I am able to get that up and running (i was also able to get splines up and running in my existing project :smile: )

by user 140331708296855552

i am wondering how i interact with the spline programmatically from the browser?

by user 140331708296855552

Great. I think in the website we used a modified version of that - not exactly the script in modules. I need to backport that at some point. Right now I would recommend you copy the SplineWalker in your own project (maybe rename it) and edit it to suit your needs

hmm- maybe i am missing something- how do i interact with the SplineWalker in the project you sent?

by user 140331708296855552

oh wait… seems it is not even working correctly :woman_facepalming:

by user 140331708296855552

In the project the splinewalker just has a speed setting and it interpolates through the spline autonomously. In the website we exposed a field to animate a point on the spline from within unity.

by user 140331708296855552

have you pulled the submodule too?