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

Hello,

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:

slow

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:

faster

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 (https://threejs.org/examples/?q=modi#webgl_modifier_curve) 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:

example

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

See from the Collection of examples from discourse.threejs.org
the examples
MotionAlongCurve
BasisToQuaternion
MovementOnCurve
and
CarRacing

and change the number.

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

Hey,

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);
scene.add(this.flow.object3D);

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.

CarRacingQuaternion

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.