Hey everyone, I am trying to animate a rotation of 7 cubes that rotate about the z-axis. I figured out how to rotate it using the animation_time. However I want the cubes to remain connected to each other in a certain position(ie on their left corner). I know there’s a way to link/chain objects together, and I’ve read code about it. However the way that I have to code is lower level physically doing everything myself. So that being said here is how my cubes are “stored”,
let cubes = [];
for (let i = 0; i < 7; i++) {
let cube = new THREE.Mesh(custom_cube_geometry, phong_material);
cube.matrixAutoUpdate = false;
cubes.push(cube);
scene.add(cube);
}
and here is my animation implimentation:
let animation_time = 0;
let delta_animation_time;
let rotation_angle;
const clock = new THREE.Clock();
const MAX_ANGLE = 20 * Math.PI / 360; // 20 degrees converted to radians
const T = 3; // Oscillation period in seconds
function animate() {
delta_animation_time = clock.getDelta();
animation_time += delta_animation_time;
// sinusoidal movement as a function of time
rotation_angle = MAX_ANGLE * (Math.sin((2 * Math.PI / T) * animation_time) + 1);
let animatedAngle = rotationMatrixZ(rotation_angle);
for (let i = 0; i < cubes.length; i++) {
if (i === 0) {
// Apply initial transformation to the first cube
model_transformation.identity(); // Reset to identity for the first cube
model_transformation.multiplyMatrices(scaler, model_transformation); // Scale the first cube
cubes[i].matrix.copy(model_transformation); // Copy the transformation to the first cube
} else {
// chain transformations for subsequent cubes
model_transformation.multiplyMatrices(translation, model_transformation); // Translate by new scaled units
//if i change this to animated angle then each cube rotates individually instead
//model_transformation.multiplyMatrices(rotation, model_transformation); // Rotate by 20 degrees
//model_transformation.multiplyMatrices(translationTest, model_transformation); // Adjust translation for corner touch
//model_transformation.multiplyMatrices(scaler, model_transformation); // Scale height of the cube
//this kinda works now it just rotates back to the corner which is better than before
//model_transformation.multiplyMatrices(animatedAngle, model_transformation);
model_transformation.multiplyMatrices(animatedAngle, model_transformation);
cubes[i].matrix.copy(model_transformation); // Copy the chained transformation to each cube
}
}
// Render the scene and update controls
renderer.render(scene, camera);
controls.update();
// Continue the animation
requestAnimationFrame(animate);
}
I want to ensure that the cubes remain connected to each other by one of their corners(ie the previous cubes top left corner and the next cubes bottom left corner). I know that this is what heircary is useful for/ what I need but I don’t know how to implement it using my specific situation which is an array. I drew a little visual of what I want to happen.
