"updated overall animation logics"
This commit is contained in:
SreeNath14
@@ -1,590 +1,16 @@
|
||||
// import React, { useRef, useState, useEffect, useMemo } from "react";
|
||||
// import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
||||
// import { GLTFLoader } from "three-stdlib";
|
||||
// import { useLoader, useFrame } from "@react-three/fiber";
|
||||
// import * as THREE from "three";
|
||||
// import { GLTF } from "three-stdlib";
|
||||
// import boxGltb from "../../../assets/gltf-glb/crate_box.glb";
|
||||
|
||||
// interface PointAction {
|
||||
// uuid: string;
|
||||
// name: string;
|
||||
// type: "Inherit" | "Spawn" | "Despawn" | "Delay" | "Swap";
|
||||
// objectType: string;
|
||||
// material: string;
|
||||
// delay: string | number;
|
||||
// spawnInterval: string | number;
|
||||
// isUsed: boolean;
|
||||
// }
|
||||
|
||||
// interface ProcessPoint {
|
||||
// uuid: string;
|
||||
// position: number[];
|
||||
// rotation: number[];
|
||||
// actions: PointAction[];
|
||||
// connections: {
|
||||
// source: { pathUUID: string; pointUUID: string };
|
||||
// targets: { pathUUID: string; pointUUID: string }[];
|
||||
// };
|
||||
// }
|
||||
|
||||
// interface ProcessPath {
|
||||
// modeluuid: string;
|
||||
// modelName: string;
|
||||
// points: ProcessPoint[];
|
||||
// pathPosition: number[];
|
||||
// pathRotation: number[];
|
||||
// speed: number;
|
||||
// }
|
||||
|
||||
// interface ProcessData {
|
||||
// id: string;
|
||||
// paths: ProcessPath[];
|
||||
// animationPath: { x: number; y: number; z: number }[];
|
||||
// pointActions: PointAction[][];
|
||||
// speed: number;
|
||||
// customMaterials?: Record<string, THREE.Material>;
|
||||
// renderAs?: "box" | "custom";
|
||||
// }
|
||||
|
||||
// interface AnimationState {
|
||||
// currentIndex: number;
|
||||
// progress: number;
|
||||
// isAnimating: boolean;
|
||||
// speed: number;
|
||||
// isDelaying: boolean;
|
||||
// delayStartTime: number;
|
||||
// currentDelayDuration: number;
|
||||
// delayComplete: boolean;
|
||||
// currentPathIndex: number;
|
||||
// }
|
||||
|
||||
// interface SpawnedObject {
|
||||
// ref: React.RefObject<THREE.Group | THREE.Mesh>;
|
||||
// state: AnimationState;
|
||||
// visible: boolean;
|
||||
// material: THREE.Material;
|
||||
// spawnTime: number;
|
||||
// currentMaterialType: string;
|
||||
// position: THREE.Vector3; // The position of the object
|
||||
// }
|
||||
|
||||
// interface ProcessAnimationState {
|
||||
// spawnedObjects: { [objectId: string]: SpawnedObject };
|
||||
// nextSpawnTime: number;
|
||||
// objectIdCounter: number;
|
||||
// }
|
||||
|
||||
// const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
|
||||
// processes,
|
||||
// }) => {
|
||||
//
|
||||
// const gltf = useLoader(GLTFLoader, boxGltb) as GLTF;
|
||||
// const { isPlaying } = usePlayButtonStore();
|
||||
// const groupRef = useRef<THREE.Group>(null);
|
||||
|
||||
// const [animationStates, setAnimationStates] = useState<
|
||||
// Record<string, ProcessAnimationState>
|
||||
// >({});
|
||||
|
||||
// // Base materials
|
||||
// const baseMaterials = useMemo(
|
||||
// () => ({
|
||||
// Wood: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
|
||||
// Box: new THREE.MeshStandardMaterial({
|
||||
// color: 0xcccccc,
|
||||
// metalness: 0.8,
|
||||
// roughness: 0.2,
|
||||
// }),
|
||||
// Crate: new THREE.MeshStandardMaterial({
|
||||
// color: 0x00aaff,
|
||||
// metalness: 0.1,
|
||||
// roughness: 0.5,
|
||||
// }),
|
||||
// Default: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
|
||||
// }),
|
||||
// []
|
||||
// );
|
||||
|
||||
// // Initialize animation states when processes or play state changes
|
||||
// useEffect(() => {
|
||||
// if (!isPlaying) {
|
||||
// setAnimationStates({});
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const newStates: Record<string, ProcessAnimationState> = {};
|
||||
// processes.forEach((process) => {
|
||||
// newStates[process.id] = {
|
||||
// spawnedObjects: {},
|
||||
// nextSpawnTime: 0,
|
||||
// objectIdCounter: 0,
|
||||
// };
|
||||
// });
|
||||
// setAnimationStates(newStates);
|
||||
// }, [isPlaying, processes]);
|
||||
|
||||
// // Find spawn point in a process
|
||||
// const findSpawnPoint = (process: ProcessData): ProcessPoint | null => {
|
||||
// for (const path of process.paths || []) {
|
||||
// for (const point of path.points || []) {
|
||||
// const spawnAction = point.actions?.find(
|
||||
// (a) => a.isUsed && a.type === "Spawn"
|
||||
// );
|
||||
// if (spawnAction) {
|
||||
// return point;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// return null;
|
||||
// };
|
||||
|
||||
// // Find the corresponding animation path point for a spawn point
|
||||
// const findAnimationPathPoint = (process: ProcessData, spawnPoint: ProcessPoint): THREE.Vector3 => {
|
||||
// // If we have an animation path, use the first point
|
||||
// if (process.animationPath && process.animationPath.length > 0) {
|
||||
// // Find the index of this point in the path
|
||||
// let pointIndex = 0;
|
||||
|
||||
// // Try to find the corresponding point in the animation path
|
||||
// for (const path of process.paths || []) {
|
||||
// for (let i = 0; i < (path.points?.length || 0); i++) {
|
||||
// const point = path.points?.[i];
|
||||
// if (point && point.uuid === spawnPoint.uuid) {
|
||||
// // Found the matching point
|
||||
// if (process.animationPath[pointIndex]) {
|
||||
// const p = process.animationPath[pointIndex];
|
||||
// return new THREE.Vector3(p.x, p.y, p.z);
|
||||
// }
|
||||
// }
|
||||
// pointIndex++;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // Fallback to the spawn point's position
|
||||
// return new THREE.Vector3(
|
||||
// spawnPoint.position[0],
|
||||
// spawnPoint.position[1],
|
||||
// spawnPoint.position[2]
|
||||
// );
|
||||
// }
|
||||
|
||||
// // If no animation path, use the spawn point's position
|
||||
// return new THREE.Vector3(
|
||||
// spawnPoint.position[0],
|
||||
// spawnPoint.position[1],
|
||||
// spawnPoint.position[2]
|
||||
// );
|
||||
// };
|
||||
|
||||
// // Create a new spawned object
|
||||
// const createSpawnedObject = (
|
||||
// process: ProcessData,
|
||||
// currentTime: number,
|
||||
// materialType: string,
|
||||
// spawnPoint: ProcessPoint
|
||||
// ): SpawnedObject => {
|
||||
// const processMaterials = {
|
||||
// ...baseMaterials,
|
||||
// ...(process.customMaterials || {}),
|
||||
// };
|
||||
|
||||
// // Get the position where we should spawn
|
||||
// const spawnPosition = findAnimationPathPoint(process, spawnPoint);
|
||||
|
||||
// return {
|
||||
// ref: React.createRef(),
|
||||
// state: {
|
||||
// currentIndex: 0,
|
||||
// progress: 0,
|
||||
// isAnimating: true,
|
||||
// speed: process.speed || 1,
|
||||
// isDelaying: false,
|
||||
// delayStartTime: 0,
|
||||
// currentDelayDuration: 0,
|
||||
// delayComplete: false,
|
||||
// currentPathIndex: 0,
|
||||
// },
|
||||
// visible: true,
|
||||
// material:
|
||||
// processMaterials[materialType as keyof typeof processMaterials] ||
|
||||
// baseMaterials.Default,
|
||||
// currentMaterialType: materialType,
|
||||
// spawnTime: currentTime,
|
||||
// position: spawnPosition, // Store the position directly
|
||||
// };
|
||||
// };
|
||||
|
||||
// // Handle material swap for an object
|
||||
// const handleMaterialSwap = (
|
||||
// processId: string,
|
||||
// objectId: string,
|
||||
// materialType: string
|
||||
// ) => {
|
||||
// setAnimationStates((prev) => {
|
||||
// const processState = prev[processId];
|
||||
// if (!processState || !processState.spawnedObjects[objectId]) return prev;
|
||||
|
||||
// const process = processes.find((p) => p.id === processId);
|
||||
// const processMaterials = {
|
||||
// ...baseMaterials,
|
||||
// ...(process?.customMaterials || {}),
|
||||
// };
|
||||
|
||||
// const newMaterial =
|
||||
// processMaterials[materialType as keyof typeof processMaterials] ||
|
||||
// baseMaterials.Default;
|
||||
|
||||
// return {
|
||||
// ...prev,
|
||||
// [processId]: {
|
||||
// ...processState,
|
||||
// spawnedObjects: {
|
||||
// ...processState.spawnedObjects,
|
||||
// [objectId]: {
|
||||
// ...processState.spawnedObjects[objectId],
|
||||
// material: newMaterial,
|
||||
// currentMaterialType: materialType,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// };
|
||||
// });
|
||||
// };
|
||||
|
||||
// // Handle point actions for an object
|
||||
// const handlePointActions = (
|
||||
// processId: string,
|
||||
// objectId: string,
|
||||
// actions: PointAction[] = [],
|
||||
// currentTime: number
|
||||
// ): boolean => {
|
||||
// let shouldStopAnimation = false;
|
||||
|
||||
// actions.forEach((action) => {
|
||||
// if (!action.isUsed) return;
|
||||
|
||||
// switch (action.type) {
|
||||
// case "Delay":
|
||||
// setAnimationStates((prev) => {
|
||||
// const processState = prev[processId];
|
||||
// if (
|
||||
// !processState ||
|
||||
// !processState.spawnedObjects[objectId] ||
|
||||
// processState.spawnedObjects[objectId].state.isDelaying
|
||||
// ) {
|
||||
// return prev;
|
||||
// }
|
||||
|
||||
// const delayDuration =
|
||||
// typeof action.delay === "number"
|
||||
// ? action.delay
|
||||
// : parseFloat(action.delay as string) || 0;
|
||||
|
||||
// if (delayDuration > 0) {
|
||||
// return {
|
||||
// ...prev,
|
||||
// [processId]: {
|
||||
// ...processState,
|
||||
// spawnedObjects: {
|
||||
// ...processState.spawnedObjects,
|
||||
// [objectId]: {
|
||||
// ...processState.spawnedObjects[objectId],
|
||||
// state: {
|
||||
// ...processState.spawnedObjects[objectId].state,
|
||||
// isDelaying: true,
|
||||
// delayStartTime: currentTime,
|
||||
// currentDelayDuration: delayDuration,
|
||||
// delayComplete: false,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// };
|
||||
// }
|
||||
// return prev;
|
||||
// });
|
||||
// shouldStopAnimation = true;
|
||||
// break;
|
||||
|
||||
// case "Despawn":
|
||||
// setAnimationStates((prev) => {
|
||||
// const processState = prev[processId];
|
||||
// if (!processState) return prev;
|
||||
|
||||
// const newSpawnedObjects = { ...processState.spawnedObjects };
|
||||
// delete newSpawnedObjects[objectId];
|
||||
|
||||
// return {
|
||||
// ...prev,
|
||||
// [processId]: {
|
||||
// ...processState,
|
||||
// spawnedObjects: newSpawnedObjects,
|
||||
// },
|
||||
// };
|
||||
// });
|
||||
// shouldStopAnimation = true;
|
||||
// break;
|
||||
|
||||
// case "Swap":
|
||||
// if (action.material) {
|
||||
// handleMaterialSwap(processId, objectId, action.material);
|
||||
// }
|
||||
// break;
|
||||
|
||||
// default:
|
||||
// break;
|
||||
// }
|
||||
// });
|
||||
|
||||
// return shouldStopAnimation;
|
||||
// };
|
||||
|
||||
// // Check if point has non-inherit actions
|
||||
// const hasNonInheritActions = (actions: PointAction[] = []): boolean => {
|
||||
// return actions.some((action) => action.isUsed && action.type !== "Inherit");
|
||||
// };
|
||||
|
||||
// // Get point data for current animation index
|
||||
// const getPointDataForAnimationIndex = (
|
||||
// process: ProcessData,
|
||||
// index: number
|
||||
// ): ProcessPoint | null => {
|
||||
// if (!process.paths) return null;
|
||||
|
||||
// let cumulativePoints = 0;
|
||||
// for (const path of process.paths) {
|
||||
// const pointCount = path.points?.length || 0;
|
||||
|
||||
// if (index < cumulativePoints + pointCount) {
|
||||
// const pointIndex = index - cumulativePoints;
|
||||
// return path.points?.[pointIndex] || null;
|
||||
// }
|
||||
|
||||
// cumulativePoints += pointCount;
|
||||
// }
|
||||
|
||||
// return null;
|
||||
// };
|
||||
|
||||
// // Spawn objects for all processes
|
||||
// useFrame((state) => {
|
||||
// if (!isPlaying) return;
|
||||
|
||||
// const currentTime = state.clock.getElapsedTime();
|
||||
// setAnimationStates((prev) => {
|
||||
// const newStates = { ...prev };
|
||||
|
||||
// processes.forEach((process) => {
|
||||
// const processState = newStates[process.id];
|
||||
// if (!processState) return;
|
||||
|
||||
// const spawnPoint = findSpawnPoint(process);
|
||||
// if (!spawnPoint || !spawnPoint.actions) return;
|
||||
|
||||
// const spawnAction = spawnPoint.actions.find(
|
||||
// (a) => a.isUsed && a.type === "Spawn"
|
||||
// );
|
||||
// if (!spawnAction) return;
|
||||
|
||||
// const spawnInterval =
|
||||
// typeof spawnAction.spawnInterval === "number"
|
||||
// ? spawnAction.spawnInterval
|
||||
// : parseFloat(spawnAction.spawnInterval as string) || 0;
|
||||
|
||||
// if (currentTime >= processState.nextSpawnTime) {
|
||||
// const objectId = `obj-${process.id}-${processState.objectIdCounter}`;
|
||||
|
||||
// // Create the new object with the spawn point
|
||||
// const newObject = createSpawnedObject(
|
||||
// process,
|
||||
// currentTime,
|
||||
// spawnAction.material || "Default",
|
||||
// spawnPoint
|
||||
// );
|
||||
|
||||
// newStates[process.id] = {
|
||||
// ...processState,
|
||||
// spawnedObjects: {
|
||||
// ...processState.spawnedObjects,
|
||||
// [objectId]: newObject,
|
||||
// },
|
||||
// objectIdCounter: processState.objectIdCounter + 1,
|
||||
// nextSpawnTime: currentTime + spawnInterval,
|
||||
// };
|
||||
// }
|
||||
// });
|
||||
|
||||
// return newStates;
|
||||
// });
|
||||
// });
|
||||
|
||||
// // Animate objects for all processes
|
||||
// useFrame((state, delta) => {
|
||||
// if (!isPlaying) return;
|
||||
|
||||
// const currentTime = state.clock.getElapsedTime();
|
||||
// setAnimationStates((prev) => {
|
||||
// const newStates = { ...prev };
|
||||
|
||||
// processes.forEach((process) => {
|
||||
// const processState = newStates[process.id];
|
||||
// if (!processState) return;
|
||||
|
||||
// const path =
|
||||
// process.animationPath?.map((p) => new THREE.Vector3(p.x, p.y, p.z)) ||
|
||||
// [];
|
||||
// if (path.length < 2) return;
|
||||
|
||||
// const updatedObjects = { ...processState.spawnedObjects };
|
||||
|
||||
// Object.entries(processState.spawnedObjects).forEach(
|
||||
// ([objectId, obj]) => {
|
||||
// if (!obj.visible || !obj.state.isAnimating) return;
|
||||
|
||||
// const currentRef = gltf?.scene ? obj.ref.current : obj.ref.current;
|
||||
// if (!currentRef) return;
|
||||
|
||||
// // Set the position when the reference is first available
|
||||
// if (obj.position && obj.state.currentIndex === 0 && obj.state.progress === 0) {
|
||||
// currentRef.position.copy(obj.position);
|
||||
// }
|
||||
|
||||
// const stateRef = obj.state;
|
||||
|
||||
// // Get current point data
|
||||
// const currentPointData = getPointDataForAnimationIndex(
|
||||
// process,
|
||||
// stateRef.currentIndex
|
||||
// );
|
||||
|
||||
// // Execute actions when arriving at a new point
|
||||
// if (stateRef.progress === 0 && currentPointData?.actions) {
|
||||
// const shouldStop = handlePointActions(
|
||||
// process.id,
|
||||
// objectId,
|
||||
// currentPointData.actions,
|
||||
// currentTime
|
||||
// );
|
||||
// if (shouldStop) return;
|
||||
// }
|
||||
|
||||
// // Handle delays
|
||||
// if (stateRef.isDelaying) {
|
||||
// if (
|
||||
// currentTime - stateRef.delayStartTime >=
|
||||
// stateRef.currentDelayDuration
|
||||
// ) {
|
||||
// stateRef.isDelaying = false;
|
||||
// stateRef.delayComplete = true;
|
||||
// } else {
|
||||
// return; // Keep waiting
|
||||
// }
|
||||
// }
|
||||
|
||||
// const nextPointIdx = stateRef.currentIndex + 1;
|
||||
// const isLastPoint = nextPointIdx >= path.length;
|
||||
|
||||
// if (isLastPoint) {
|
||||
// if (currentPointData?.actions) {
|
||||
// const shouldStop = !hasNonInheritActions(
|
||||
// currentPointData.actions
|
||||
// );
|
||||
// if (shouldStop) {
|
||||
// currentRef.position.copy(path[stateRef.currentIndex]);
|
||||
// delete updatedObjects[objectId];
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// if (!isLastPoint) {
|
||||
// const nextPoint = path[nextPointIdx];
|
||||
// const distance =
|
||||
// path[stateRef.currentIndex].distanceTo(nextPoint);
|
||||
// const movement = stateRef.speed * delta;
|
||||
// stateRef.progress += movement / distance;
|
||||
|
||||
// if (stateRef.progress >= 1) {
|
||||
// stateRef.currentIndex = nextPointIdx;
|
||||
// stateRef.progress = 0;
|
||||
// stateRef.delayComplete = false;
|
||||
// currentRef.position.copy(nextPoint);
|
||||
// } else {
|
||||
// currentRef.position.lerpVectors(
|
||||
// path[stateRef.currentIndex],
|
||||
// nextPoint,
|
||||
// stateRef.progress
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
|
||||
// updatedObjects[objectId] = { ...obj, state: { ...stateRef } };
|
||||
// }
|
||||
// );
|
||||
|
||||
// newStates[process.id] = {
|
||||
// ...processState,
|
||||
// spawnedObjects: updatedObjects,
|
||||
// };
|
||||
// });
|
||||
|
||||
// return newStates;
|
||||
// });
|
||||
// });
|
||||
|
||||
// if (!processes || processes.length === 0) {
|
||||
// return null;
|
||||
// }
|
||||
|
||||
// return (
|
||||
// <>
|
||||
// {Object.entries(animationStates).flatMap(([processId, processState]) =>
|
||||
// Object.entries(processState.spawnedObjects)
|
||||
// .filter(([_, obj]) => obj.visible)
|
||||
// .map(([objectId, obj]) => {
|
||||
// const process = processes.find((p) => p.id === processId);
|
||||
// const renderAs = process?.renderAs || "custom";
|
||||
|
||||
// return renderAs === "box" ? (
|
||||
// <mesh
|
||||
// key={objectId}
|
||||
// ref={obj.ref as React.RefObject<THREE.Mesh>}
|
||||
// material={obj.material}
|
||||
// position={obj.position} // Set position directly in the JSX
|
||||
// >
|
||||
// <boxGeometry args={[1, 1, 1]} />
|
||||
// </mesh>
|
||||
// ) : (
|
||||
// gltf?.scene && (
|
||||
// <group
|
||||
// key={objectId}
|
||||
// ref={obj.ref as React.RefObject<THREE.Group>}
|
||||
// position={obj.position} // Set position directly in the JSX
|
||||
// >
|
||||
// <primitive
|
||||
// object={gltf.scene.clone()}
|
||||
// material={obj.material}
|
||||
// />
|
||||
// </group>
|
||||
// )
|
||||
// );
|
||||
// })
|
||||
// )}
|
||||
// </>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default ProcessAnimator;
|
||||
|
||||
import React, { useRef, useState, useEffect, useMemo } from "react";
|
||||
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
||||
import {
|
||||
useAnimationPlaySpeed,
|
||||
usePauseButtonStore,
|
||||
usePlayButtonStore,
|
||||
useResetButtonStore,
|
||||
} from "../../../store/usePlayButtonStore";
|
||||
import { GLTFLoader } from "three-stdlib";
|
||||
import { useLoader, useFrame } from "@react-three/fiber";
|
||||
import * as THREE from "three";
|
||||
import { GLTF } from "three-stdlib";
|
||||
import boxGltb from "../../../assets/gltf-glb/crate_box.glb";
|
||||
import camera from "../../../assets/gltf-glb/camera face 2.gltf";
|
||||
import crate from "../../../assets/gltf-glb/crate_box.glb";
|
||||
import box from "../../../assets/gltf-glb/box.glb";
|
||||
|
||||
interface PointAction {
|
||||
uuid: string;
|
||||
@@ -661,15 +87,47 @@ interface ProcessAnimationState {
|
||||
const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
|
||||
processes,
|
||||
}) => {
|
||||
const gltf = useLoader(GLTFLoader, boxGltb) as GLTF;
|
||||
const { isPlaying } = usePlayButtonStore();
|
||||
const gltf = useLoader(GLTFLoader, crate) as GLTF;
|
||||
const { isPlaying, setIsPlaying } = usePlayButtonStore();
|
||||
const { isPaused, setIsPaused } = usePauseButtonStore();
|
||||
const { isReset, setReset } = useResetButtonStore();
|
||||
const groupRef = useRef<THREE.Group>(null);
|
||||
const debugRef = useRef<boolean>(false);
|
||||
|
||||
const clockRef = useRef<THREE.Clock>(new THREE.Clock());
|
||||
const pauseTimeRef = useRef<number>(0);
|
||||
const elapsedBeforePauseRef = useRef<number>(0);
|
||||
const animationStatesRef = useRef<Record<string, ProcessAnimationState>>({});
|
||||
const { speed, setSpeed } = useAnimationPlaySpeed();
|
||||
const prevIsPlaying = useRef<boolean | null>(null);
|
||||
const [internalResetFlag, setInternalResetFlag] = useState(false);
|
||||
const [animationStates, setAnimationStates] = useState<
|
||||
Record<string, ProcessAnimationState>
|
||||
>({});
|
||||
|
||||
// Store the speed in a ref to access the latest value in animation frames
|
||||
const speedRef = useRef<number>(speed);
|
||||
|
||||
// Update the ref when speed changes
|
||||
useEffect(() => {
|
||||
speedRef.current = speed;
|
||||
}, [speed]);
|
||||
|
||||
useEffect(() => {
|
||||
if (prevIsPlaying.current !== null) {
|
||||
setAnimationStates({});
|
||||
}
|
||||
|
||||
// Update ref to current isPlaying after effect
|
||||
prevIsPlaying.current = isPlaying;
|
||||
|
||||
// setAnimationStates({});
|
||||
}, [isPlaying]);
|
||||
|
||||
// Sync ref with state
|
||||
useEffect(() => {
|
||||
animationStatesRef.current = animationStates;
|
||||
}, [animationStates]);
|
||||
|
||||
// Base materials
|
||||
const baseMaterials = useMemo(
|
||||
() => ({
|
||||
@@ -680,26 +138,66 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
|
||||
[]
|
||||
);
|
||||
|
||||
// Replace your reset effect with this:
|
||||
useEffect(() => {
|
||||
if (isReset) {
|
||||
// 1. Mark that we're doing an internal reset
|
||||
setInternalResetFlag(true);
|
||||
|
||||
// 2. Pause the animation first
|
||||
setIsPlaying(false);
|
||||
setIsPaused(false);
|
||||
|
||||
// 3. Reset all animation states
|
||||
setAnimationStates({});
|
||||
animationStatesRef.current = {};
|
||||
|
||||
// 4. Reset timing references
|
||||
clockRef.current = new THREE.Clock();
|
||||
elapsedBeforePauseRef.current = 0;
|
||||
pauseTimeRef.current = 0;
|
||||
|
||||
// 5. Clear the external reset flag
|
||||
setReset(false);
|
||||
|
||||
// 6. After state updates are complete, restart
|
||||
setTimeout(() => {
|
||||
setInternalResetFlag(false);
|
||||
setIsPlaying(true);
|
||||
}, 0);
|
||||
}
|
||||
}, [isReset, setReset, setIsPlaying, setIsPaused]);
|
||||
|
||||
// Handle pause state changes
|
||||
useEffect(() => {
|
||||
if (isPaused) {
|
||||
pauseTimeRef.current = clockRef.current.getElapsedTime();
|
||||
} else if (pauseTimeRef.current > 0) {
|
||||
const pausedDuration =
|
||||
clockRef.current.getElapsedTime() - pauseTimeRef.current;
|
||||
elapsedBeforePauseRef.current += pausedDuration;
|
||||
}
|
||||
}, [isPaused]);
|
||||
|
||||
// Initialize animation states when processes or play state changes
|
||||
useEffect(() => {
|
||||
if (!isPlaying) {
|
||||
setAnimationStates({});
|
||||
return;
|
||||
if (isPlaying && !internalResetFlag) {
|
||||
const newStates: Record<string, ProcessAnimationState> = {};
|
||||
processes.forEach((process) => {
|
||||
newStates[process.id] = {
|
||||
spawnedObjects: {},
|
||||
nextSpawnTime: 0,
|
||||
objectIdCounter: 0,
|
||||
isProcessDelaying: false,
|
||||
processDelayStartTime: 0,
|
||||
processDelayDuration: 0,
|
||||
};
|
||||
});
|
||||
setAnimationStates(newStates);
|
||||
animationStatesRef.current = newStates;
|
||||
clockRef.current.start();
|
||||
}
|
||||
|
||||
const newStates: Record<string, ProcessAnimationState> = {};
|
||||
processes.forEach((process) => {
|
||||
newStates[process.id] = {
|
||||
spawnedObjects: {},
|
||||
nextSpawnTime: 0,
|
||||
objectIdCounter: 0,
|
||||
isProcessDelaying: false,
|
||||
processDelayStartTime: 0,
|
||||
processDelayDuration: 0,
|
||||
};
|
||||
});
|
||||
setAnimationStates(newStates);
|
||||
}, [isPlaying, processes]);
|
||||
}, [isPlaying, processes, internalResetFlag]);
|
||||
|
||||
const findSpawnPoint = (process: ProcessData): ProcessPoint | null => {
|
||||
for (const path of process.paths || []) {
|
||||
@@ -767,7 +265,7 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
|
||||
currentIndex: 0,
|
||||
progress: 0,
|
||||
isAnimating: true,
|
||||
speed: process.speed || 1,
|
||||
speed: process.speed || 1, // Process base speed (will be multiplied by global speed)
|
||||
isDelaying: false,
|
||||
delayStartTime: 0,
|
||||
currentDelayDuration: 0,
|
||||
@@ -953,10 +451,12 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
|
||||
return null;
|
||||
};
|
||||
|
||||
useFrame((state) => {
|
||||
if (!isPlaying) return;
|
||||
useFrame(() => {
|
||||
if (!isPlaying || isPaused) return;
|
||||
|
||||
const currentTime =
|
||||
clockRef.current.getElapsedTime() - elapsedBeforePauseRef.current;
|
||||
|
||||
const currentTime = state.clock.getElapsedTime();
|
||||
setAnimationStates((prev) => {
|
||||
const newStates = { ...prev };
|
||||
|
||||
@@ -965,9 +465,13 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
|
||||
if (!processState) return;
|
||||
|
||||
if (processState.isProcessDelaying) {
|
||||
// Apply global speed to delays (faster speed = shorter delays)
|
||||
const effectiveDelayTime =
|
||||
processState.processDelayDuration / speedRef.current;
|
||||
|
||||
if (
|
||||
currentTime - processState.processDelayStartTime >=
|
||||
processState.processDelayDuration
|
||||
effectiveDelayTime
|
||||
) {
|
||||
newStates[process.id] = {
|
||||
...processState,
|
||||
@@ -1009,6 +513,9 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
|
||||
? spawnAction.spawnInterval
|
||||
: parseFloat(spawnAction.spawnInterval as string) || 0;
|
||||
|
||||
// Apply global speed to spawn intervals (faster speed = more frequent spawns)
|
||||
const effectiveSpawnInterval = spawnInterval / speedRef.current;
|
||||
|
||||
if (currentTime >= processState.nextSpawnTime) {
|
||||
const objectId = `obj-${process.id}-${processState.objectIdCounter}`;
|
||||
const newObject = createSpawnedObject(
|
||||
@@ -1025,7 +532,7 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
|
||||
[objectId]: newObject,
|
||||
},
|
||||
objectIdCounter: processState.objectIdCounter + 1,
|
||||
nextSpawnTime: currentTime + spawnInterval,
|
||||
nextSpawnTime: currentTime + effectiveSpawnInterval,
|
||||
};
|
||||
}
|
||||
});
|
||||
@@ -1034,10 +541,12 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
|
||||
});
|
||||
});
|
||||
|
||||
useFrame((state, delta) => {
|
||||
if (!isPlaying) return;
|
||||
useFrame((_, delta) => {
|
||||
if (!isPlaying || isPaused) return;
|
||||
|
||||
const currentTime =
|
||||
clockRef.current.getElapsedTime() - elapsedBeforePauseRef.current;
|
||||
|
||||
const currentTime = state.clock.getElapsedTime();
|
||||
setAnimationStates((prev) => {
|
||||
const newStates = { ...prev };
|
||||
|
||||
@@ -1046,9 +555,13 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
|
||||
if (!processState) return;
|
||||
|
||||
if (processState.isProcessDelaying) {
|
||||
// Apply global speed to delays (faster speed = shorter delays)
|
||||
const effectiveDelayTime =
|
||||
processState.processDelayDuration / speedRef.current;
|
||||
|
||||
if (
|
||||
currentTime - processState.processDelayStartTime >=
|
||||
processState.processDelayDuration
|
||||
effectiveDelayTime
|
||||
) {
|
||||
newStates[process.id] = {
|
||||
...processState,
|
||||
@@ -1104,10 +617,11 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
|
||||
const stateRef = obj.state;
|
||||
|
||||
if (stateRef.isDelaying) {
|
||||
if (
|
||||
currentTime - stateRef.delayStartTime >=
|
||||
stateRef.currentDelayDuration
|
||||
) {
|
||||
// Apply global speed to delays (faster speed = shorter delays)
|
||||
const effectiveDelayTime =
|
||||
stateRef.currentDelayDuration / speedRef.current;
|
||||
|
||||
if (currentTime - stateRef.delayStartTime >= effectiveDelayTime) {
|
||||
stateRef.isDelaying = false;
|
||||
stateRef.delayComplete = true;
|
||||
stateRef.isAnimating = true;
|
||||
@@ -1177,7 +691,10 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
|
||||
const nextPoint = path[nextPointIdx];
|
||||
const distance =
|
||||
path[stateRef.currentIndex].distanceTo(nextPoint);
|
||||
const movement = stateRef.speed * delta;
|
||||
|
||||
// Apply both process-specific speed and global speed multiplier
|
||||
const effectiveSpeed = stateRef.speed * speedRef.current;
|
||||
const movement = effectiveSpeed * delta;
|
||||
|
||||
if (stateRef.delayComplete && stateRef.progress < 0.01) {
|
||||
stateRef.progress = 0.05;
|
||||
|
||||
Reference in New Issue
Block a user