I am confused on how this user from this post was able to get the green circles to rotate based on the direction the curve was pointing. So far all of the instances of my mesh are pointing in the same direction. I don’t want to just copy and paste the code, I wish to understand step-by-step what was done to make this possible. If you could please point me in the right direction on how to comprehend what is going on in this piece of code, I would greatly appreciate it.

u: find a spaced interval from 0 - 1 along the curve…
centerOfCircle: get a point along the curve at “u”
tangent: get the tangent of the curve at “u”
axis: cross of up and tangent vectors…

I understand it a little bit better, but I cannot figure out why the plank instances are not following along the curve that the circled extruded geometry is following.

I should have realized this before, but I did not set the origin of the plank to the center of the mesh, and so now it is arranged correctly. Thank you for your helpful explanation, @Lawrence3DPK !

Unfortunately, the rotation is still a little bit off. I was hoping they would be more like this, with the wider faces facing the direction the curve is going while staying flat along the curve:

// t tangent, n normal, b binormal
const n = new THREE.Vector3().normalize()
const b = new THREE.Vector3().normalize()
// index is the index of plank instance
let f = index;
let t = curve.getTangent( f );
b.crossVectors( t, n );
n.crossVectors( t, b.negate( ) );
plankRef.current.quaternion.setFromBasis( t.negate(), b, n )

I apologize for my lack of knowledge with this feature. Here is my codesandbox for this issue, though I keep getting an error in there saying that children are not a function and I don’t know how to solve that either.

This might help other people in case if they get weird rotation like this, I found out that you can have the 3d object look at something. Now it appears to be rotated a little less awkwardly.

Yes it is, thank you for this example. If you don’t mind, I have a few questions to understand the code further. Why does using a matrix work better in this scenario instead of setFromAxisAngle? Why do you put %1 in some places? Also why is subVectors used instead of crossVectors?

Whenever I want to give a specific absolute orientation of an object, I prefer to use matrices. I just feel more comfortable with them. The data in a rotational matrix are the coordinates of the local axes. So if I can get the directions of the three axes, this is enough to make the rotation.

The path spans from 0 to 1. To make object loop along the path, I use time%1 – this is the fractional part of the time. Thus an object will be at the same place at times 0.2, 1.2, 2.2, 3.2 … because %1 will give just 0.2 for each of them.

You might be confused by the meaning of ‘vector’ – it could mean a vector (as a direction), but it could also mean a specific point in space (sometimes this is called radius-vector). In my code I use subVectors to subtract two vectors, this is the vector between the two points. However, I simplified the code, so now subVectors is not used at all.

I’d use crossVectors when I set the axes manually and I need to make them orthogonal. In the code I used Matrix4.lookAt which does this for me.

Here is an example of transfering from one coordinate system to another, where I construct the matrix manually and I use cross: https://codepen.io/boytchev/pen/JjVmGQM