arm ui added
This commit is contained in:
parent
18b6a4b22d
commit
fb1995acdb
|
|
@ -2,9 +2,17 @@ import { useEffect } from "react";
|
|||
import RoboticArmInstances from "./instances/roboticArmInstances";
|
||||
import { useArmBotStore } from "../../../store/simulation/useArmBotStore";
|
||||
import { useFloorItems } from "../../../store/store";
|
||||
import { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
|
||||
import { useEventsStore } from "../../../store/simulation/useEventsStore";
|
||||
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
||||
import ArmBotUI from "../ui/arm/armBotUI";
|
||||
|
||||
function RoboticArm() {
|
||||
const { armBots, addArmBot, removeArmBot } = useArmBotStore();
|
||||
const { addEvent } = useEventsStore();
|
||||
const { selectedEventSphere } = useSelectedEventSphere();
|
||||
const { selectedEventData } = useSelectedEventData();
|
||||
const { isPlaying } = usePlayButtonStore();
|
||||
const { floorItems } = useFloorItems();
|
||||
const armBotStatusSample: RoboticArmEventSchema[] = [
|
||||
{
|
||||
|
|
@ -156,12 +164,18 @@ function RoboticArm() {
|
|||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
}, [armBots]);
|
||||
|
||||
console.log('isPlaying: ', isPlaying);
|
||||
console.log('selectedEventData: ', selectedEventData);
|
||||
console.log('selectedEventSphere: ', selectedEventSphere);
|
||||
}, [selectedEventData, selectedEventSphere, isPlaying]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<RoboticArmInstances />
|
||||
{selectedEventSphere && selectedEventData?.data.type === "roboticArm" && !isPlaying &&
|
||||
< ArmBotUI />
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,155 @@
|
|||
import React from 'react'
|
||||
import PickDropPoints from './PickDropPoints';
|
||||
import { useSelectedEventData, useSelectedEventSphere } from '../../../../store/simulation/useSimulationStore';
|
||||
import { useArmBotStore } from '../../../../store/simulation/useArmBotStore';
|
||||
import useModuleStore from '../../../../store/useModuleStore';
|
||||
import { useGLTF } from '@react-three/drei';
|
||||
import armPick from "../../../../assets/gltf-glb/arm_ui_pick.glb";
|
||||
import armDrop from "../../../../assets/gltf-glb/arm_ui_drop.glb";
|
||||
import useDraggableGLTF from './useDraggableGLTF';
|
||||
import * as THREE from "three";
|
||||
import { useThree } from '@react-three/fiber';
|
||||
const ArmBotUI = () => {
|
||||
console.log("called");
|
||||
const { selectedEventSphere } = useSelectedEventSphere();
|
||||
const { selectedEventData } = useSelectedEventData();
|
||||
const { armBots, updateArmBot } = useArmBotStore();
|
||||
const armUiPick = useGLTF(armPick) as any;
|
||||
const { scene } = useThree();
|
||||
const armUiDrop = useGLTF(armDrop) as any;
|
||||
|
||||
const getDefaultPositions = (modelUuid: string) => {
|
||||
const modelData = getModelByUuid(modelUuid);
|
||||
if (modelData) {
|
||||
|
||||
const baseX = modelData.position?.[0] || 0;
|
||||
const baseY = 2.6;
|
||||
const baseZ = modelData.position?.[2] || 0;
|
||||
return {
|
||||
pick: [baseX, baseY, baseZ + 0.4],
|
||||
drop: [baseX, baseY, baseZ - 1.2],
|
||||
default: [baseX, baseY, baseZ - 1.5],
|
||||
};
|
||||
}
|
||||
return {
|
||||
pick: [0.5, 1.5, 0],
|
||||
drop: [-0.5, 1.5, 0],
|
||||
default: [0, 1.5, 0],
|
||||
};
|
||||
};
|
||||
const getModelByUuid = (modelUuid: string) => {
|
||||
try {
|
||||
const modelsJson = localStorage.getItem("FloorItems");
|
||||
if (modelsJson) {
|
||||
const models = JSON.parse(modelsJson);
|
||||
return models.find((m: any) => m.modeluuid === modelUuid);
|
||||
}
|
||||
const storeModels = (useModuleStore.getState() as any).models || [];
|
||||
return storeModels.find((m: any) => m.modelUuid === modelUuid);
|
||||
} catch (error) { }
|
||||
return null;
|
||||
};
|
||||
const updatePointToState = (obj: THREE.Object3D) => {
|
||||
const { modelUuid, pointUuid, actionType, actionUuid } = obj.userData;
|
||||
|
||||
const newPosition = new THREE.Vector3();
|
||||
obj.getWorldPosition(newPosition);
|
||||
const worldPositionArray = newPosition.toArray();
|
||||
|
||||
const armBot = armBots.find((a) => a.modelUuid === modelUuid);
|
||||
if (!armBot) return;
|
||||
|
||||
const updatedActions = armBot.point.actions.map((action: any) => {
|
||||
if (action.actionUuid === actionUuid) {
|
||||
const updatedProcess = { ...action.process };
|
||||
|
||||
if (actionType === "pick") {
|
||||
updatedProcess.startPoint = getLocalPosition(modelUuid, worldPositionArray);
|
||||
}
|
||||
if (actionType === "drop") {
|
||||
updatedProcess.endPoint = getLocalPosition(modelUuid, worldPositionArray);
|
||||
}
|
||||
return {
|
||||
...action,
|
||||
process: updatedProcess,
|
||||
};
|
||||
}
|
||||
return action;
|
||||
});
|
||||
|
||||
updateArmBot(modelUuid, {
|
||||
point: {
|
||||
...armBot.point,
|
||||
actions: updatedActions,
|
||||
},
|
||||
});
|
||||
};
|
||||
function getLocalPosition(parentUuid: string, worldPosArray: [number, number, number] | null): [number, number, number] | null {
|
||||
if (worldPosArray) {
|
||||
const worldPos = new THREE.Vector3(...worldPosArray);
|
||||
const localPos = worldPos.clone();
|
||||
|
||||
const parentObject = scene.getObjectByProperty('uuid', parentUuid);
|
||||
if (parentObject) {
|
||||
parentObject.worldToLocal(localPos);
|
||||
|
||||
return [localPos.x, localPos.y, localPos.z];
|
||||
} else {
|
||||
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
const { handlePointerDown } = useDraggableGLTF(updatePointToState);
|
||||
|
||||
return (
|
||||
<>
|
||||
{armBots.map((event: any) => {
|
||||
const defaultPositions = getDefaultPositions(event.modelUuid);
|
||||
const isSelected =
|
||||
selectedEventSphere?.userData?.modelUuid === event.modelUuid;
|
||||
|
||||
return event.point.actions.map((action: any) => {
|
||||
if (action.actionType === "pickAndPlace") {
|
||||
const pickPosition = action.process.startPoint || defaultPositions.pick;
|
||||
const dropPosition = action.process.endPoint || defaultPositions.drop;
|
||||
|
||||
return (
|
||||
<React.Fragment key={action.actionUuid}>
|
||||
{/* Pick Point */}
|
||||
<PickDropPoints
|
||||
position={pickPosition}
|
||||
modelUuid={event.modelUuid}
|
||||
pointUuid={event.point.uuid}
|
||||
actionType="pick"
|
||||
actionUuid={action.actionUuid}
|
||||
gltfScene={armUiPick.scene}
|
||||
selectedPoint={selectedEventSphere}
|
||||
handlePointerDown={handlePointerDown}
|
||||
isSelected={isSelected}
|
||||
/>
|
||||
|
||||
{/* Drop Point */}
|
||||
<PickDropPoints
|
||||
position={dropPosition}
|
||||
modelUuid={event.modelUuid}
|
||||
pointUuid={event.point.uuid}
|
||||
actionType="drop"
|
||||
actionUuid={action.actionUuid}
|
||||
gltfScene={armUiDrop.scene}
|
||||
selectedPoint={selectedEventSphere}
|
||||
handlePointerDown={handlePointerDown}
|
||||
isSelected={isSelected}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
});
|
||||
})}
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
export default ArmBotUI
|
||||
Loading…
Reference in New Issue