I have a React component called Train that is just a simple box geometry
<group ref={trainRef} position={trainPosition}>
<lineSegments>
<edgesGeometry attach="geometry" args={[new THREE.BoxGeometry(trainWidth, trainHeight, trainDepth)]}/>
<lineBasicMaterial ref={materialRef} attach="material" color={"#ff69b4"}/>
</lineSegments>
<axesHelper/>
</group>
The idea is that I have 4 of these boxes positioned in a ring
<group ref={group} position={ringPosition}>
{trainParamsArray.map((params, index) => (
<Train key={index} params={params}/>
))}
</group>
Where this is how I determine the Train positions and make the ring itself be in motion
// 3. Create train positions around ring
const trainParamsArray = [];
for (let i = 0; i < 4; i++) {
const angle = (i / 4) * Math.PI * 2;
const x = (ringRadiusOuterEdge + ringRadiusInnerEdge) / 2 * Math.cos(angle);
const z = (ringRadiusOuterEdge + ringRadiusInnerEdge) / 2 * Math.sin(angle);
trainParamsArray.push({
trainPosition: [x, 3, z],
trainWidth: trainWidth,
trainHeight: trainHeight,
trainDepth: trainDepth,
});
}
// 4. Update movement
useFrame(() => {
// Synchronize with RingFloaters
group.current.rotation.y -= 0.0002;
group.current.rotation.z = 0.33;
group.current.rotation.x = Math.PI / 2;
});
From here I want to update the Train component itself to always have one of it’s faces be looking at the vector of motion
So effectively I have a Cluster component that moves the Trains, and I am trying to figure out how to determine the vector of motion of a Train
In ThreeJS is there some way to determine if an object has rotations being applied to it?
Or the alternative would be to use Math to determine how much degrees to yaw the Train in either direction as it moves about the ring
Any help greatly appreciated!