armbot ui added

This commit is contained in:
Gomathi 2025-04-28 17:54:55 +05:30
parent 60949ea8f5
commit 1182850a1f
6 changed files with 89 additions and 229 deletions

View File

@ -8,11 +8,13 @@ import {
useSelectedEventSphere, useSelectedEventSphere,
useSelectedEventData, useSelectedEventData,
} from "../../../../../store/simulation/useSimulationStore"; } from "../../../../../store/simulation/useSimulationStore";
import PickDropPoints from "../../../../../components/ui/arm/PickDropPoints"; import PickDropPoints from "../../../ui/arm/PickDropPoints";
import armPick from "../../../../../assets/gltf-glb/arm_ui_pick.glb"; import armPick from "../../../../../assets/gltf-glb/arm_ui_pick.glb";
import armDrop from "../../../../../assets/gltf-glb/arm_ui_drop.glb"; import armDrop from "../../../../../assets/gltf-glb/arm_ui_drop.glb";
import useDraggableGLTF from "../../../../../components/ui/arm/useDraggableGLTF"; import useDraggableGLTF from "../../../ui/arm/useDraggableGLTF";
import { useArmBotStore } from "../../../../../store/simulation/useArmBotStore";
import { useThree } from "@react-three/fiber";
interface Process { interface Process {
startPoint: number[] | null; startPoint: number[] | null;
@ -47,91 +49,30 @@ interface RoboticArmEvent {
function PointsCreator() { function PointsCreator() {
const { events, updatePoint, getPointByUuid, getEventByModelUuid } = const { events, updatePoint, getPointByUuid, getEventByModelUuid } =
useEventsStore(); useEventsStore();
const { armBots, updateArmBot, addArmBot, removeArmBot } = useArmBotStore()
const [armBotStatusSample, setArmBotStatusSample] = useState<
RoboticArmEvent[]
>([
{
modelUuid: "b3556818-9e46-48b0-a869-a75c92857125",
modelName: "robotic_arm",
position: [0, 0, 0],
rotation: [0, 0, 0],
state: "idle",
type: "roboticArm",
speed: 1.5,
point: {
uuid: "point-123",
position: [0, 1.5, 0],
rotation: [0, 0, 0],
actions: [
{
actionUuid: "action-001",
actionName: "Pick Component",
actionType: "pickAndPlace",
process: {
startPoint: null,
endPoint: null,
},
triggers: [],
},
{
actionUuid: "action-002",
actionName: "Pick Component",
actionType: "pickAndPlace",
process: {
startPoint: null,
endPoint: null,
},
triggers: [],
},
],
},
},
{
modelUuid: "16a394c7-0808-4bdf-a5d3-e5ca141ffb9f",
modelName: "arm without rig (1)",
position: [0, 0, 0],
rotation: [0, 0, 0],
state: "idle",
type: "roboticArm",
speed: 1.5,
point: {
uuid: "point-123",
position: [0, 1.5, 0],
rotation: [0, 0, 0],
actions: [
{
actionUuid: "action-001",
actionName: "Pick Component",
actionType: "pickAndPlace",
process: {
startPoint: null,
endPoint: null,
},
triggers: [],
},
],
},
},
]);
const armUiPick = useGLTF(armPick) as any; const armUiPick = useGLTF(armPick) as any;
const armUiDrop = useGLTF(armDrop) as any; const armUiDrop = useGLTF(armDrop) as any;
const updatePointToState = (obj: THREE.Object3D) => { const updatePointToState = (obj: THREE.Object3D) => {
const { modelUuid, pointUuid, actionType, actionUuid } = obj.userData; const { modelUuid, pointUuid, actionType, actionUuid } = obj.userData;
const newPosition = obj.position.toArray();
setArmBotStatusSample((prev) => const newPosition = new THREE.Vector3();
prev.map((event) => { obj.getWorldPosition(newPosition);
if (event.modelUuid === modelUuid) { const worldPositionArray = newPosition.toArray();
const updatedActions = event.point.actions.map((action) => {
const armBot = armBots.find((a) => a.modelUuid === modelUuid);
if (!armBot) return;
const updatedActions = armBot.point.actions.map((action: any) => {
if (action.actionUuid === actionUuid) { if (action.actionUuid === actionUuid) {
const updatedProcess = { ...action.process }; const updatedProcess = { ...action.process };
if (actionType === "pick") { if (actionType === "pick") {
updatedProcess.startPoint = newPosition; updatedProcess.startPoint = getLocalPosition(modelUuid, worldPositionArray);
} else if (actionType === "drop") { }
updatedProcess.endPoint = newPosition; if (actionType === "drop") {
updatedProcess.endPoint = getLocalPosition(modelUuid, worldPositionArray);
} }
return { return {
...action, ...action,
@ -141,23 +82,20 @@ function PointsCreator() {
return action; return action;
}); });
return { updateArmBot(modelUuid, {
...event,
point: { point: {
...event.point, ...armBot.point,
actions: updatedActions, actions: updatedActions,
}, },
});
}; };
}
return event;
})
);
};
const { handlePointerDown } = useDraggableGLTF(updatePointToState); const { handlePointerDown } = useDraggableGLTF(updatePointToState);
const { scene } = useThree();
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
const transformRef = useRef<any>(null); const transformRef = useRef<any>(null);
const groupRef = useRef<any>(null);
const [transformMode, setTransformMode] = useState< const [transformMode, setTransformMode] = useState<
"translate" | "rotate" | null "translate" | "rotate" | null
>(null); >(null);
@ -206,12 +144,13 @@ function PointsCreator() {
const getDefaultPositions = (modelUuid: string) => { const getDefaultPositions = (modelUuid: string) => {
const modelData = getModelByUuid(modelUuid); const modelData = getModelByUuid(modelUuid);
if (modelData) { if (modelData) {
const baseX = modelData.position?.[0] || 0; const baseX = modelData.position?.[0] || 0;
const baseY = modelData.position?.[1] + 2.8 || 1.5; const baseY = 2.6;
const baseZ = modelData.position?.[2] || 0; const baseZ = modelData.position?.[2] || 0;
return { return {
pick: [baseX, baseY, baseZ - 2.5], pick: [baseX, baseY, baseZ + 0.4],
drop: [baseX, baseY, baseZ - 0.5], drop: [baseX, baseY, baseZ - 1.2],
default: [baseX, baseY, baseZ - 1.5], default: [baseX, baseY, baseZ - 1.5],
}; };
} }
@ -235,109 +174,57 @@ function PointsCreator() {
return null; return null;
}; };
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;
}
useEffect(() => { useEffect(() => {
console.log("armBotStatusSample: ", armBotStatusSample);
}, [armBotStatusSample]); }, [armBots]);
return ( return (
<> <>
{activeModule === "simulation" && ( {activeModule === "simulation" && (
<> <>
<group name="EventPointsGroup"> <group name="EventPointsGroup">
{events.map((event, i) => { {armBots.map((event, i) => {
if (event.type === "transfer") { if (event.type === "roboticArm") {
return (
<group
key={i}
position={new THREE.Vector3(...event.position)}
>
{event.points.map((point, j) => (
<mesh
name="Event-Sphere"
uuid={point.uuid}
ref={(el) => (sphereRefs.current[point.uuid] = el!)}
onClick={(e) => {
e.stopPropagation();
setSelectedEventSphere(
sphereRefs.current[point.uuid]
);
}}
onPointerMissed={() => {
clearSelectedEventSphere();
setTransformMode(null);
}}
key={`${i}-${j}`}
position={new THREE.Vector3(...point.position)}
userData={{
modelUuid: event.modelUuid,
pointUuid: point.uuid,
}}
>
<sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="orange" />
</mesh>
))}
</group>
);
} else if (event.type === "vehicle") {
return (
<group
key={i}
position={new THREE.Vector3(...event.position)}
>
<mesh
name="Event-Sphere"
uuid={event.point.uuid}
ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
onClick={(e) => {
e.stopPropagation();
setSelectedEventSphere(
sphereRefs.current[event.point.uuid]
);
}}
onPointerMissed={() => {
clearSelectedEventSphere();
setTransformMode(null);
}}
position={new THREE.Vector3(...event.point.position)}
userData={{
modelUuid: event.modelUuid,
pointUuid: event.point.uuid,
}}
>
<sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="blue" />
</mesh>
</group>
);
} else if (event.type === "roboticArm") {
const defaultPositions = getDefaultPositions(event.modelUuid); const defaultPositions = getDefaultPositions(event.modelUuid);
const isSelected = const isSelected =
selectedPoint?.userData?.modelUuid === event.modelUuid; selectedPoint?.userData?.modelUuid === event.modelUuid;
return ( return (
<group <group
key={i} key={i}
position={new THREE.Vector3(...event.position)} position={new THREE.Vector3(...event.position)}
rotation={new THREE.Euler(...event.rotation)}
> >
<mesh <mesh
name='Event-Sphere'
uuid={event.point.uuid} uuid={event.point.uuid}
ref={(el) => (sphereRefs.current[event.point.uuid] = el!)} ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setSelectedEventSphere( setSelectedEventSphere(sphereRefs.current[event.point.uuid]);
sphereRefs.current[event.point.uuid]
);
setSelectedPoint(e.object as THREE.Mesh); setSelectedPoint(e.object as THREE.Mesh);
}} }}
onPointerMissed={() => { onPointerMissed={() => {
clearSelectedEventSphere(); clearSelectedEventSphere();
setTransformMode(null); setTransformMode(null);
}} }}
position={new THREE.Vector3(...defaultPositions.default)} position={new THREE.Vector3(...event.point.position)}
userData={{ userData={{ modelUuid: event.modelUuid, pointUuid: event.point.uuid }}
modelUuid: event.modelUuid,
pointUuid: event.point.uuid,
}}
> >
<sphereGeometry args={[0.1, 16, 16]} /> <sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial <meshStandardMaterial
@ -346,6 +233,7 @@ function PointsCreator() {
</mesh> </mesh>
{event.point.actions.map((action) => { {event.point.actions.map((action) => {
if (action.actionType === "pickAndPlace") { if (action.actionType === "pickAndPlace") {
const pickPosition = const pickPosition =
action.process.startPoint || defaultPositions.pick; action.process.startPoint || defaultPositions.pick;
const dropPosition = const dropPosition =
@ -385,37 +273,6 @@ function PointsCreator() {
})} })}
</group> </group>
); );
} else if (event.type === "machine") {
return (
<group
key={i}
position={new THREE.Vector3(...event.position)}
>
<mesh
name="Event-Sphere"
uuid={event.point.uuid}
ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
onClick={(e) => {
e.stopPropagation();
setSelectedEventSphere(
sphereRefs.current[event.point.uuid]
);
}}
onPointerMissed={() => {
clearSelectedEventSphere();
setTransformMode(null);
}}
position={new THREE.Vector3(...event.point.position)}
userData={{
modelUuid: event.modelUuid,
pointUuid: event.point.uuid,
}}
>
<sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="purple" />
</mesh>
</group>
);
} else { } else {
return null; return null;
} }

View File

@ -67,7 +67,7 @@ function RoboticArmInstance({ robot }: { robot: ArmBotStatus }) {
} }
//Waiting for trigger. //Waiting for trigger.
else if (robot && !robot.isActive && robot.state === "idle" && currentPhase === "rest" && !robot.currentAction) { else if (robot && !robot.isActive && robot.state === "idle" && currentPhase === "rest" && !robot.currentAction) {
console.log("trigger"); logStatus(robot.modelUuid, "Waiting to trigger CurrentAction")
setTimeout(() => { setTimeout(() => {
addCurrentAction(robot.modelUuid, 'action-003'); addCurrentAction(robot.modelUuid, 'action-003');
}, 3000); }, 3000);

View File

@ -65,17 +65,8 @@ function IKInstance({ modelUrl, setIkSolver, ikSolver, robot, groupRef, processe
const solver = new CCDIKSolver(OOI.Skinned_Mesh, iks); const solver = new CCDIKSolver(OOI.Skinned_Mesh, iks);
setIkSolver(solver); setIkSolver(solver);
const helper = new CCDIKHelper(OOI.Skinned_Mesh, iks, 0.05); const helper = new CCDIKHelper(OOI.Skinned_Mesh, iks, 0.05)
// if (solver) {
// const bone = solver.mesh.skeleton.bones.find(
// (b: any) => b.name === targetBoneName
// ) ?? "";
// if (bone) {
// const position = new THREE.Vector3();
// bone.getWorldPosition(position);
// console.log("world position", position.x, position.y, position.z); // this is the bone's world position
// }
// }
scene.add(helper) scene.add(helper)

View File

@ -11,7 +11,7 @@ function RoboticArm() {
const armBotStatusSample: RoboticArmEventSchema[] = [ const armBotStatusSample: RoboticArmEventSchema[] = [
{ {
state: "idle", state: "idle",
modelUuid: "armbot-xyz-001", modelUuid: "3abf5d46-b59e-4e6b-9c02-a4634b64b82d",
modelName: "ArmBot-X200", modelName: "ArmBot-X200",
position: [0.20849215906958463, 0, 0.32079278127773675], position: [0.20849215906958463, 0, 0.32079278127773675],
rotation: [-1.3768690876192207e-15, 1.4883085074751308, 1.5407776675834467e-15], rotation: [-1.3768690876192207e-15, 1.4883085074751308, 1.5407776675834467e-15],
@ -19,7 +19,7 @@ function RoboticArm() {
speed: 1.5, speed: 1.5,
point: { point: {
uuid: "point-123", uuid: "point-123",
position: [0, 1.5, 0], position: [0, 2.6, 0],
rotation: [0, 0, 0], rotation: [0, 0, 0],
actions: [ actions: [
{ {
@ -30,6 +30,18 @@ function RoboticArm() {
startPoint: [-1, 2, 1], startPoint: [-1, 2, 1],
endPoint: [-2, 1, -1], endPoint: [-2, 1, -1],
}, },
// process: {
// "startPoint": [
// 0.37114476008711866,
// 1.9999999999999998,
// 1.8418816116721384
// ],
// "endPoint": [
// -0.42197069459490777,
// 1,
// -3.159515927851809
// ]
// },
triggers: [ triggers: [
{ {
triggerUuid: "trigger-001", triggerUuid: "trigger-001",
@ -154,7 +166,7 @@ function RoboticArm() {
}, []); }, []);
useEffect(() => { useEffect(() => {
//
}, [armBots]); }, [armBots]);
return ( return (