Moving objects along curve very slowly with instanced curve modifier (InstancedFlow)


i am creating an underwater vr game as a project at my university with a few mates.
I want to let fish swim along a curve and thought the example of the instanced curve modifier was perfect for this case.

It is already working so far but i have a problem when i want to move the fish along the curve very slowly where it creates this weird effect:


I just use instacedFlow.moveAlongCurve() to move the fish along the curve. I also already tried to use moveIndividualAlongCurve() to move every individual fish but is creates the same result.

Moving the fish faster makes it less noticeable but doesn’t remove it entirely:


The curve those fish are moving on is a CatmullRomCurve3 i create by generating random points.

I wonder if anyone maybe knows what i am doing wrong.

Okay, so i did some further testing and as it seems this is not my fault.
I can recreate this behaviour in the given example ( by dragging the points of the curve quite far away from each other.

I recorded it and slowed it down significantly so you can see what the text looks like.
It is not readable anymore:


The number of points is not necessarily.
What is your code?

See from the Collection of examples from
the examples

and change the number.

const points = curve.getPoints( number ); // 80, 800, 20 ...


thanks for your answer.
I dont have a problem to move my objects along a curve in general, it just doesn’t work with the Flow Class.

I broke down my code to be really really simple and it still looks weird.

const curve = new CatmullRomCurve3(points, true, 'chordal');
const material = // some material;
const geometry = // some geometry;
const mesh = new Mesh(geometry, material);
const flow = new Flow(mesh);
flow.updateCurve(0, this.curve);

The points used here for the curve are just some randomly generated points somewhere in my scene.
In my render function i then use:

flow.moveAlongCurve(delta / 100);

Where delta is the seconds since the last call.

No matter what i do, when using the the Flow class, as the curve gets longer, the animation of the object looks more and more off. And it does not matter here if i have a long curve with many points which are close to each other or just few which are far apart. It generates the same result.

I have modified the code from MotionAlongCurve and also use delta. Then it is also jerky at delta / 100 but fluid at delta / 10.

const geometry = new THREE.BoxGeometry( 0.2, 0.08, 0.05 );
const material = new THREE.MeshPhongMaterial( { color: 0x99ffff, wireframe: false } );
const objectToCurve = new THREE.Mesh( geometry, material );

const flow = new Flow( objectToCurve ); 
flow.updateCurve( 0, curve );
scene.add( flow.object3D );

const clock = new THREE.Clock();
let delta;

animate( );

function animate( ) {

    delta = clock.getDelta( );
	requestAnimationFrame( animate );
	//flow.moveAlongCurve( 0.0006 );
    flow.moveAlongCurve( delta / 100  );
	renderer.render( scene, camera );


But why delta at all and not a fixed value?

Maybe it is worth to test another version, e.g. with quaternions.


Thanks for testing.
Unfortunately i want the speed to be adjustable and having it only be smooth until a certain amount and after that getting jerky is not what i want.

I am using a delta so that the speed of the fish is the same on every device. Otherwise the fish would swim faster on a device which generates more fps and slower at lower fps.

I also have a working version with quaternions but i thought the “bending” of the models along the curve to be really nice looking for the movement of fish. This is not obtainable when working with a quaternion, as far as i know, because you only rotate the entire object.
But as it seems i can not realize what i want to do with the Flow class to my satisfaction. A shame, but not the end of the world :smiley:

Always the same speed is certainly a problem, on older devices some things don’t run at all because the moving models are too complex.

But maybe it can be achieved by limiting it to devices that display it in a range of 40 to 60 fps?

If by “bend” you mean that the object does not always stay in the same direction to the x,z plane (in sideways direction) , then that is easily possible with quaternions.

With the method I added
THREE.Quaternion.prototype.setFromBasis = function( e1, e2, e3 ) { …

see Car Racing - For lovers of fast cars!
you can set the orientation or bend as you like.

For the cars, I made it so that the road is always horizontal with respect to the sides of the road. For a real car race you could tilt the road accordingly in the curves.