I am currently working on running an animation using a JSON file and a custom JSON loader, not the one provided with three.js. Within the JSON file, there is an object called frames that contains multiple frames, each with shape information and a simulation_matrix consisting of data necessary for animation in the form of a 4x4 transformation matrix generated from a python script. To execute this animation, I am utilizing this code and loading a sample JSON script from here.
// This function adds static shapes successfully
parent.add_shape = function(frame) {
var material = new THREE.MeshLambertMaterial({
color: frame.shape.color,
wireframe: true,
wireframeLinewidth: 0.1,
opacity: 0.5
});
var geometry = new THREE.CylinderGeometry(frame.shape.radius, frame.shape.radius, frame.shape.height, 50, 50);
parent.mesh_dict[frame] = new THREE.Mesh(geometry, material);
var init_orientation = frame.simulation_matrix[0];
var orienter = new THREE.Matrix4();
orienter.elements = [];
// Manually pushing elements from simulation_matrix to Matrix4
for (var i in init_orientation) {
for (var j in init_orientation[i]) {
orienter.elements.push(init_orientation[i][j]);
}
}
parent.mesh_dict[frame].applyMatrix(new THREE.Matrix4());
parent.mesh_dict[frame].applyMatrix(orienter);
parent.scene.add(parent.mesh_dict[frame]);
parent.renderer.render(parent.scene, parent.camera);
}
// This function applies simulation matrix to shapes for animation
parent.animate = function() {
for (var frame in JSONObj.frames) {
var matrix = JSONObj.frames[frame].simulation_matrix[parent.animation_counter];
var animation_matrix = new THREE.Matrix4();
animation_matrix.elements = [];
// Pushing elements to Matrix4
for (var i in matrix) {
for (var j in matrix[i]) {
animation_matrix.elements.push(matrix[i][j]);
}
}
console.log(animation_matrix);
console.log(animation_matrix.elements);
parent.mesh_dict[JSONObj.frames[frame]].applyMatrix(new THREE.Matrix4());
parent.mesh_dict[JSONObj.frames[frame]].applyMatrix(animation_matrix);
}
console.log(parent.animation_counter);
parent.animation_counter++;
if (parent.animation_counter == 10) {
parent.animation_counter = 0;
}
requestAnimationFrame(parent.animate);
}
The issue arises when applying the simulation matrix to animate the shapes, as only one shape is animating unexpectedly within the loop.