Creating stars that move along a specific path

Questions
1

Hello, I am new to three.js. I watched a couple of tutorials and I managed to create some awesome stuff however, I feel that I am now stuck because I can’t find tuotrials on youtube and sometimes I don’t even know how to ask the right questions because I do not know what Three.js is capable off because of the lack of materials around that explains how the technology works " sorry for prolonging this introductory section ".

Anyhow, I have a simple portfolio website, which has some animations. What I want to do is the following:-

When the user reaches the bottom of the page via scroll down, I want a new animation to start, some stars will move from the left side of the screen and when they reach right side screen ( technologies that i know section, ex react,js etc )

each star will move along its path and when each star reaches its distination, I want its respected icon to appear. Ex:
star moves * ----------- distination reached ( star vanishes ) React icon appears

What I managed to understand so far is that I need the following:

I need a way to calculate that the bottom of page has been reached
I need to add an if function with a timer to start the animation after 2-3 seconds, example
Then my stars animation should fire

any tips ideas on how to tackle this ? thank you very much!

2

I dont think the documentation lacks explanation. Everything beyond the documentation does involve your imagination, because each project or idea has its very own way of implementation. This involves experience in the language/framework. Threejs provides tons of examples to learn from other peoples experience. You can have wood, screws and tools to build a home, but no one can ever explain you, how you imagine it to look/feel/function. Also your first house will not be as good as your third.

There are many ways to detect the bottom of the page. One example:

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // Reached bottom
    }
};

You can either store animations directly in your 3D model when using Blender for example. Here you would animate your objects and export them, then in ThreeJs you just start and stop the animation.

Or you can animate your model by manipulating the 3D objects directly in Three. Here you would import your model and manipulate for example the position.

For your usecase its probably best to do the animations in Threejs directly.
Here is a example to animate sth along a path.
And heres another discussion about sth similar

1 Like
3

These examples from the Collection of examples from discourse.threejs.org might help you move things along any path.

BasisToQuaternion
CarRacing
MovementOnCurve
Orbit
MotionAlongCurve
getPointAt( )
SmoothTurnsToPath
3DReducedTextGeometry
Wall

1 Like
4

Thank you very very very very much !!!

5

Just one more addition to the list :slight_smile: Object3D.worldToLocal() causes jittering - #8 by prisoner849

6

Sorry, I overlooked that. Is also represented in the collection.2021-11-17 19.46.54

1 Like