Good day.
I need to move an object along such trajectories:
requestAnimationFrame( animate );
render();
render() {
// animation
}
I can twist an object, move it back and forth, but how can I create complex motion paths?
Hi!
Seems your question is related to this topic: Struggling with paths - #8 by hofk
You can see the formula for a helix there SpiralFromCylinder
For the moves of your picture. I think the simplest way to do it is using “gsap” on your object.
Thank you - Prisoner849.
Found something similar: Object moving over a 3D path
MixTeR I need to make animation in a three js.
I would like to make animations like on this site: Lusion.
Static three js without movement is not interesting to look at
prisoner849 looking at this example: MotionAlongCurve
I see one class - CurveModifier.
import {Flow} from “…/jsm/CurveModifier.128.js”;
Is this a self-written class?
I see. I understand. Well I just say. gsap is an easy alternative, you can combine gsap with threejs. for example . the last part (the bottom of the page) are two spotlights looping.
whit gsap you can do something like:
–Random example to do change of position –
gsap.to(spotLight1.position, {duration:3,delay:0, x:2 });
gsap.to(spotLight1.position, {duration:3,delay:3, z:-6 });
gsap.to(spotLight1.position, {duration:3,delay:6, y:5 });
gsap.to(spotLight1.rotation, 1, { y: mesh.rotation.y + Math.PI * 2 });
and you can combine it whit formulas to do any combination that you can imagine for example:
const elapsedTime = clock.getElapsedTime();
spotLight1.position.x = Math.cos(elapsedTime)*1.5;
spotLight1.position.z = Math.sin(elapsedTime)1.5;
spotLight1.position.y = Math.abs(Math.sin(elapsedTime3));
Mmm… for the “the bed sheet people” I think is a model made with blender then cloned, then the animation of walking are playing infinte whit animation mixer of walking. the change of ther position are random but you have to put a conditional that check the proximation of each to avoid colapse, another way is using physics that push the others in a another random direction. scene has fog and shadows enabled. the ground is a plane with texture and height map, the water is a shader.
Sorry I know my english is bad
Gsap isn’t good for complex paths such as paths with curves apparently see this:
See the reply from prisoner849
hofk has some great examples in there
here’s a pen i was playing with also:
Perhaps the reason I still think that gsap is a good alternative is because I have not yet come across something complex enough that I cannot replicate it. In fact, I have only used gsap in simple patterns. But, for example, the prisioner849 example can be replicate with gsap and a mathematical formula. Anyway, maybe you’re right, after all I have little time to start learning threejs :3
No, see source code hint
<!-- https://discourse.threejs.org/t/struggling-with-paths/26486/4 -->
<!-- see also https://threejs.org/examples/?q=modi#webgl_modifier_curve -->
three.js examples there is a splineditor in the examples. when u have this spline u can move ur object with transform animations position rotation from the exported vectors from the spline