To monitor flow.object3D.position continuously, you need to read it in your render/animation loop. For example:
function animate() {
requestAnimationFrame(animate);
if (flow) {
flow.moveAlongCurve(-0.0005);
console.log(
'Flow position:',
flow.object3D.position.x,
flow.object3D.position.y,
flow.object3D.position.z
);
}
renderer.render(scene, camera);
}
animate();
This way, you’ll see the object’s position update each frame. If printing every frame affects performance or clutters the console, you can log less frequently (e.g., every few frames) or store the data for debugging later. Also, ensure flow.object3D is indeed the object that moves along the curve, as some libraries manage internal transforms differently, requiring you to check flow.object3D.children[0] or similar if the position doesn’t change as expected.
I have
console.log(flow.object3D.position.x+" “+flow.object3D.position.y+” "+flow.object3D.position.z);
inside animate() … but the output is always 0 0 0.
Yes, it’s moving the vertices directly in the shader. You can see it updating the instance matrices with InstancedFlow, so the parent object position stays the same. Ref. CurveModifier.js
Since the curve object is defined, you can get the current virtual position using one of the Curve’s methods, like curve.getPoint(t).
As we can see, the movement of the box, based on curve.getPoint(t), do not follow the flow movement.
The velocity of the box is not the same of the cylinder.
GPT, for two times carried me to this approach.
I suppose that the solution only will be possible when we find what changes inside the shader and log this in the animate function.
Hi @GitHubDragonFly …
Yo have done s[1].add(s[2]); … then threre will only be a flow… no more s[2]!
My need is to log the position of flow, to use this position to make other things.
For example synchronization of other meshes, appearence of tags, touching the flow with another mesh… etc.
The post was started to call for help for correct the movement of the chain with respect to the gears here…
It seems like there is an offset of 0.25 between how the curve is interpolated inside the Shader and with the Curve class, I had to initiate the t used by the curve class with an offset of 0.25.
let currentT = 0.25; // 0.25 Offset
const positionAtT = new THREE.Vector3();
//...
// Inside the animation loop
if (flow) {
flow.moveAlongCurve(0.001);
currentT += 0.001; // Incrementing the current t
curve.getPoint(currentT, positionAtT);
console.log(positionAtT);
}
And here is an example updated from the official demo, with a position tracker:
I made a page to observe your proposal…
Notice that the cylinder oscillates between the letters t and r.
I believe it is a difference between shader times and the browser timer.
Please see if it is possible to correct it.
However, I think your proposal is great.
Thank you very much for your attention!
PS: Sorry for the delay. I didn’t have an Internet connection due to heavy rains here in São Paulo.
The oscillation occurs because the shader’s stores pre-computed positions in a DataTexture (resolution TEXTURE_WIDTH = 1024), and this result in a uniform interpolation, while curve.getPoint(t) produces non-uniform points (slower on curves, more points, faster on straight segments, less points), causing the mismatch.
The Solution
Instead of using curve.getPoint(t), I tried to mimic the shader, so I’ve pre-computed the curve points at the same resolution as the shader (TEXTURE_WIDTH = 1024) and interpolated through these points. And it worked ! I got a consistent behavior between the curve and the shader.
updateCurvePoints: Updates the curvePoints array whenever the curve changes:
// line 255
function updateCurvePoints() {
const numberOfPoints = TEXTURE_WIDTH;
curvePoints.length = 0;
curvePoints.push(...curve.getSpacedPoints(numberOfPoints));
}
Called at line 134 (initialization) and line 204 (inside the dragging-changed event listener).
interpolateCurvePoints: Interpolates through the curvePoints array for a given t:
// line 262
const _vec3 = new THREE.Vector3();
function interpolateCurvePoints(t, curvePoints) {
t = t % 1;
const index = Math.floor(t * (curvePoints.length - 1));
const pointsT = t * (curvePoints.length - 1) - index;
const pointA = curvePoints[index];
const pointB = curvePoints[index + 1];
return _vec3.lerpVectors(pointA, pointB, pointsT);
}
Called at line 241, inside the animation loop.
Animation Loop Update:
// line 239
if (flow) {
flow.moveAlongCurve(0.001);
const positionAtT = interpolateCurvePoints((currentT += 0.001), curvePoints);
trackerLabel.setPosition(positionAtT);
}
Offset issue
The initial offset issue still exists, and I couldn’t solve it. However, it seems stable as long as the curve isn’t updated. A potential solution could be to store the offset with each predefined curve update.
! I got a consistent behavior between the curve and the shader.