added save/load for json data of project, fixed saving scenes with sample mode.

Author: MatthewSavitt

animationHud.js

@@ -180,6 +180,21 @@ export function createPlaybackHUD(animationManager, scene) {
     pathToggleCheckbox.checked = true; // Default to showing paths
     pathToggleCheckbox.id = 'path-toggle';
 
+    // Listen for project loading to update UI state
+    window.addEventListener('project-loaded', (event) => {
+        if (event.detail && event.detail.showAnimationPaths !== undefined) {
+            window.showAnimationPaths = event.detail.showAnimationPaths;
+            togglePathsButton.textContent = window.showAnimationPaths ? '👁️ Paths: ON' : '👁️ Paths: OFF';
+            
+            // Update visibility of all paths
+            scene.traverse(obj => {
+                if (obj.isAnimationPath) {
+                    obj.visible = window.showAnimationPaths;
+                }
+            });
+        }
+    });
+
     // Add components to container in correct order
     pathToggleContainer.appendChild(pathLabelContent);
     pathToggleContainer.appendChild(pathToggleCheckbox);
@@ -194,11 +209,27 @@ export function createPlaybackHUD(animationManager, scene) {
     gizmoToggleCheckbox.id = 'gizmo-toggle';
     gizmoToggleCheckbox.checked = true; // Default to visible
 
+    //create gizmo icon image
+    const gizmoIcon = document.createElement('img');
+    gizmoIcon.src = '/../assets/gizmo.PNG';
+    gizmoIcon.width = 20;
+    gizmoIcon.height = 20;
+    gizmoIcon.style.marginLeft = '5px';
+
     const gizmoToggleLabel = document.createElement('label');
     gizmoToggleLabel.htmlFor = 'gizmo-toggle';
     gizmoToggleLabel.textContent = 'Show Gizmo:';
     gizmoToggleLabel.style.marginRight = '10px';
 
+    // Create label container with icon and text
+    const gizmoLabelContent = document.createElement('div');
+    gizmoLabelContent.style.display = 'flex';
+    gizmoLabelContent.style.alignItems = 'right';
+    gizmoLabelContent.style.marginRight = '10px';
+    gizmoLabelContent.appendChild(gizmoIcon);
+    gizmoLabelContent.appendChild(gizmoToggleLabel);
+    gizmoToggleContainer.appendChild(gizmoLabelContent);
+    // Append the checkbox to the label container
     gizmoToggleContainer.appendChild(gizmoToggleLabel);
     gizmoToggleContainer.appendChild(gizmoToggleCheckbox);
 

animationManager.js

@@ -10,52 +10,15 @@ export class AnimationManager {
     }
 
     addAnimation(object, animationConfig) {
+        console.log("Adding animation:", animationConfig);
+        
         // Update start/end times of the timeline if needed
         this.startTime = Math.min(this.startTime, animationConfig.startT);
         this.endTime = Math.max(this.endTime, animationConfig.endT);
 
-        // Check if the object already has animations
+        // Initialize animations array if it doesn't exist
         if (!object.animations) {
             object.animations = [];
-            
-            // Add an update method to the object
-            object.update = (time) => {
-                // Apply all animations for this object, using the provided time
-                object.animations.forEach(anim => {
-                    const { property, axis, startT, endT, functions, loop } = anim;
-                    
-                    // Skip if outside time range and not looping
-                    if (time < startT) return;
-                    if (time > endT && !loop && !this.loop) return;
-                    
-                    // Calculate local time based on global time
-                    let localTime;
-                    if (loop || this.loop) {
-                        // Loop the animation (cycle between startT and endT)
-                        const duration = endT - startT;
-                        const elapsed = time - startT;
-                        localTime = startT + (elapsed % duration);
-                    } else {
-                        // Play once and clamp to endT
-                        localTime = Math.min(time, endT);
-                    }
-                    
-                    // Apply the function to the specified property and axis
-                    if (functions[axis]) {
-                        const { apply, params } = functions[axis];
-                        const value = apply(localTime, params);
-                        
-                        // Apply to the object
-                        if (property === 'position') {
-                            object.position[axis] = value;
-                        } else if (property === 'rotation') {
-                            object.rotation[axis] = value;
-                        } else if (property === 'scale') {
-                            object.scale[axis] = Math.max(0.01, value); // Prevent negative/zero scale
-                        }
-                    }
-                });
-            };
         }
 
         // Add this animation to the object's animations
@@ -64,8 +27,49 @@ export class AnimationManager {
         // Add to global animations list
         this.animations.push({ object, ...animationConfig });
 
+        // Ensure the update method is created
+        object.update = (time) => {
+            if (!object.animations || object.animations.length === 0) return;
+            
+            object.animations.forEach(anim => {
+                const { property, axis, startT, endT, functions } = anim;
+                
+                if (time < startT) return;
+                
+                let localTime;
+                if (this.loop) {
+                    const duration = endT - startT;
+                    const elapsed = time - startT;
+                    localTime = startT + (elapsed % duration);
+                } else {
+                    localTime = Math.min(time, endT);
+                }
+                
+                if (functions[axis]) {
+                    const { apply, params } = functions[axis];
+                    const value = apply(localTime, params);
+                    
+                    if (property === 'position') {
+                        object.position[axis] = value;
+                    } else if (property === 'rotation') {
+                        object.rotation[axis] = value;
+                    } else if (property === 'scale') {
+                        object.scale[axis] = Math.max(0.01, value);
+                    } else if (property === 'color' && object.material && object.material.color) {
+                        // Color animation
+                        if (axis === 'r') object.material.color.r = value / 255;
+                        if (axis === 'g') object.material.color.g = value / 255;
+                        if (axis === 'b') object.material.color.b = value / 255;
+                    }
+                }
+            });
+        };
+        
         // Apply animation immediately with current time
         object.update(this.globalTime);
+        
+        // Debug log to verify the animation is added
+        console.log(`Animation added to ${object.uuid}, total animations: ${this.animations.length}`);
     }    addAnimation(object, animationConfig) {
         console.log("Adding animation:", animationConfig);
 

app.js

@@ -6,6 +6,7 @@ import { createTorusMenu } from './torusMenu.js';
 import { createConeMenu } from './coneMenu.js';
 import { createCylinderMenu } from './cylinderMenu.js';
 import { createExportMenu } from './exportMenu.js';
+import { createProjectMenu } from './projectMenu.js';
 //import { createCustomObjectMenu } from './customObjectMenu.js';
 import { initializeObjectEditMenu, getSelectedObject} from './objectEditMenu.js';
 // import animation manager
@@ -53,6 +54,7 @@ createTorusMenu(scene);
 createConeMenu(scene);
 createCylinderMenu(scene);
 createExportMenu(scene, animManager, getActiveCamera, renderer);
+createProjectMenu(scene, animManager, getActiveCamera);
 //createCustomObjectMenu(scene);
 // Initialize the animation HUD
 createPlaybackHUD(animManager, scene);