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 (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:
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.
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
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 ) { …
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.