added arm ui
This commit is contained in:
Nalvazhuthi
@@ -18,20 +18,20 @@ import Window from "../../assets/gltf-glb/window.glb";
|
||||
////////// Zustand State Imports //////////
|
||||
|
||||
import {
|
||||
useToggleView,
|
||||
useDeletePointOrLine,
|
||||
useMovePoint,
|
||||
useActiveLayer,
|
||||
useSocketStore,
|
||||
useWallVisibility,
|
||||
useRoofVisibility,
|
||||
useShadows,
|
||||
useUpdateScene,
|
||||
useWalls,
|
||||
useToolMode,
|
||||
useRefTextUpdate,
|
||||
useRenderDistance,
|
||||
useLimitDistance,
|
||||
useToggleView,
|
||||
useDeletePointOrLine,
|
||||
useMovePoint,
|
||||
useActiveLayer,
|
||||
useSocketStore,
|
||||
useWallVisibility,
|
||||
useRoofVisibility,
|
||||
useShadows,
|
||||
useUpdateScene,
|
||||
useWalls,
|
||||
useToolMode,
|
||||
useRefTextUpdate,
|
||||
useRenderDistance,
|
||||
useLimitDistance,
|
||||
} from "../../store/store";
|
||||
|
||||
////////// 3D Function Imports //////////
|
||||
@@ -56,300 +56,301 @@ import ZoneGroup from "./groups/zoneGroup";
|
||||
import useModuleStore from "../../store/useModuleStore";
|
||||
import MeasurementTool from "../scene/tools/measurementTool";
|
||||
import NavMesh from "../simulation/vehicle/navMesh/navMesh";
|
||||
import ProductionCapacity from "../../components/ui/analysis/ProductionCapacity";
|
||||
|
||||
export default function Builder() {
|
||||
const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
|
||||
const csg = useRef(); // Reference for CSG object, used for 3D modeling.
|
||||
const CSGGroup = useRef() as Types.RefMesh; // Reference to a group of CSG objects.
|
||||
const scene = useRef() as Types.RefScene; // Reference to the scene.
|
||||
const camera = useRef() as Types.RefCamera; // Reference to the camera object.
|
||||
const controls = useRef<any>(); // Reference to the controls object.
|
||||
const raycaster = useRef() as Types.RefRaycaster; // Reference for raycaster used for detecting objects being pointed at in the scene.
|
||||
const dragPointControls = useRef() as Types.RefDragControl; // Reference for drag point controls, an array for drag control.
|
||||
const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
|
||||
const csg = useRef(); // Reference for CSG object, used for 3D modeling.
|
||||
const CSGGroup = useRef() as Types.RefMesh; // Reference to a group of CSG objects.
|
||||
const scene = useRef() as Types.RefScene; // Reference to the scene.
|
||||
const camera = useRef() as Types.RefCamera; // Reference to the camera object.
|
||||
const controls = useRef<any>(); // Reference to the controls object.
|
||||
const raycaster = useRef() as Types.RefRaycaster; // Reference for raycaster used for detecting objects being pointed at in the scene.
|
||||
const dragPointControls = useRef() as Types.RefDragControl; // Reference for drag point controls, an array for drag control.
|
||||
|
||||
// Assigning the scene and camera from the Three.js state to the references.
|
||||
// Assigning the scene and camera from the Three.js state to the references.
|
||||
|
||||
scene.current = state.scene;
|
||||
camera.current = state.camera;
|
||||
controls.current = state.controls;
|
||||
raycaster.current = state.raycaster;
|
||||
scene.current = state.scene;
|
||||
camera.current = state.camera;
|
||||
controls.current = state.controls;
|
||||
raycaster.current = state.raycaster;
|
||||
|
||||
const plane = useRef<THREE.Mesh>(null); // Reference for a plane object for raycaster reference.
|
||||
const grid = useRef() as any; // Reference for a grid object for raycaster reference.
|
||||
const snappedPoint = useRef() as Types.RefVector3; // Reference for storing a snapped point at the (end = isSnapped) and (start = ispreSnapped) of the line.
|
||||
const isSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (end).
|
||||
const anglesnappedPoint = useRef() as Types.RefVector3; // Reference for storing an angle-snapped point when the line is in 90 degree etc...
|
||||
const isAngleSnapped = useRef(false) as Types.RefBoolean; // Boolean to indicate if angle snapping is active.
|
||||
const isSnappedUUID = useRef() as Types.RefString; // UUID reference to identify the snapped point.
|
||||
const ispreSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (start).
|
||||
const tempLoader = useRef() as Types.RefMesh; // Reference for a temporary loader for the floor items.
|
||||
const isTempLoader = useRef() as Types.RefBoolean; // Reference to check if a temporary loader is active.
|
||||
const Tube = useRef() as Types.RefTubeGeometry; // Reference for tubes used for reference line creation and updation.
|
||||
const line = useRef([]) as Types.RefLine; // Reference for line which stores the current line that is being drawn.
|
||||
const lines = useRef([]) as Types.RefLines; // Reference for lines which stores all the lines that are ever drawn.
|
||||
const onlyFloorline = useRef<Types.OnlyFloorLine>([]); // Reference for floor lines which does not have walls or roof and have only floor used to store the current line that is being drawn.
|
||||
const onlyFloorlines = useRef<Types.OnlyFloorLines>([]); // Reference for all the floor lines that are ever drawn.
|
||||
const ReferenceLineMesh = useRef() as Types.RefMesh; // Reference for storing the mesh of the reference line for moving it during draw.
|
||||
const LineCreated = useRef(false) as Types.RefBoolean; // Boolean to track whether the reference line is created or not.
|
||||
const referencePole = useRef() as Types.RefMesh; // Reference for a pole that is used as the reference for the user to show where it is placed.
|
||||
const itemsGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the floor items (Gltf).
|
||||
const floorGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the roofs and the floors.
|
||||
const AttachedObject = useRef() as Types.RefMesh; // Reference for an object that is attached using dbl click for transform controls rotation.
|
||||
const floorPlanGroup = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines group and the points group.
|
||||
const floorPlanGroupLine = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines that are drawn.
|
||||
const floorPlanGroupPoint = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the points that are created.
|
||||
const floorGroupAisle = useRef() as Types.RefGroup;
|
||||
const zoneGroup = useRef() as Types.RefGroup;
|
||||
const currentLayerPoint = useRef([]) as Types.RefMeshArray; // Reference for points that re in the current layer used to update the points in drag controls.
|
||||
const hoveredDeletablePoint = useRef() as Types.RefMesh; // Reference for the currently hovered point that can be deleted.
|
||||
const hoveredDeletableLine = useRef() as Types.RefMesh; // Reference for the currently hovered line that can be deleted.
|
||||
const hoveredDeletableFloorItem = useRef() as Types.RefMesh; // Reference for the currently hovered floor item that can be deleted.
|
||||
const hoveredDeletableWallItem = useRef() as Types.RefMesh; // Reference for the currently hovered wall item that can be deleted.
|
||||
const hoveredDeletablePillar = useRef() as Types.RefMesh; // Reference for the currently hovered pillar that can be deleted.
|
||||
const currentWallItem = useRef() as Types.RefMesh; // Reference for the currently selected wall item that can be scaled, dragged etc...
|
||||
const plane = useRef<THREE.Mesh>(null); // Reference for a plane object for raycaster reference.
|
||||
const grid = useRef() as any; // Reference for a grid object for raycaster reference.
|
||||
const snappedPoint = useRef() as Types.RefVector3; // Reference for storing a snapped point at the (end = isSnapped) and (start = ispreSnapped) of the line.
|
||||
const isSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (end).
|
||||
const anglesnappedPoint = useRef() as Types.RefVector3; // Reference for storing an angle-snapped point when the line is in 90 degree etc...
|
||||
const isAngleSnapped = useRef(false) as Types.RefBoolean; // Boolean to indicate if angle snapping is active.
|
||||
const isSnappedUUID = useRef() as Types.RefString; // UUID reference to identify the snapped point.
|
||||
const ispreSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (start).
|
||||
const tempLoader = useRef() as Types.RefMesh; // Reference for a temporary loader for the floor items.
|
||||
const isTempLoader = useRef() as Types.RefBoolean; // Reference to check if a temporary loader is active.
|
||||
const Tube = useRef() as Types.RefTubeGeometry; // Reference for tubes used for reference line creation and updation.
|
||||
const line = useRef([]) as Types.RefLine; // Reference for line which stores the current line that is being drawn.
|
||||
const lines = useRef([]) as Types.RefLines; // Reference for lines which stores all the lines that are ever drawn.
|
||||
const onlyFloorline = useRef<Types.OnlyFloorLine>([]); // Reference for floor lines which does not have walls or roof and have only floor used to store the current line that is being drawn.
|
||||
const onlyFloorlines = useRef<Types.OnlyFloorLines>([]); // Reference for all the floor lines that are ever drawn.
|
||||
const ReferenceLineMesh = useRef() as Types.RefMesh; // Reference for storing the mesh of the reference line for moving it during draw.
|
||||
const LineCreated = useRef(false) as Types.RefBoolean; // Boolean to track whether the reference line is created or not.
|
||||
const referencePole = useRef() as Types.RefMesh; // Reference for a pole that is used as the reference for the user to show where it is placed.
|
||||
const itemsGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the floor items (Gltf).
|
||||
const floorGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the roofs and the floors.
|
||||
const AttachedObject = useRef() as Types.RefMesh; // Reference for an object that is attached using dbl click for transform controls rotation.
|
||||
const floorPlanGroup = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines group and the points group.
|
||||
const floorPlanGroupLine = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines that are drawn.
|
||||
const floorPlanGroupPoint = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the points that are created.
|
||||
const floorGroupAisle = useRef() as Types.RefGroup;
|
||||
const zoneGroup = useRef() as Types.RefGroup;
|
||||
const currentLayerPoint = useRef([]) as Types.RefMeshArray; // Reference for points that re in the current layer used to update the points in drag controls.
|
||||
const hoveredDeletablePoint = useRef() as Types.RefMesh; // Reference for the currently hovered point that can be deleted.
|
||||
const hoveredDeletableLine = useRef() as Types.RefMesh; // Reference for the currently hovered line that can be deleted.
|
||||
const hoveredDeletableFloorItem = useRef() as Types.RefMesh; // Reference for the currently hovered floor item that can be deleted.
|
||||
const hoveredDeletableWallItem = useRef() as Types.RefMesh; // Reference for the currently hovered wall item that can be deleted.
|
||||
const hoveredDeletablePillar = useRef() as Types.RefMesh; // Reference for the currently hovered pillar that can be deleted.
|
||||
const currentWallItem = useRef() as Types.RefMesh; // Reference for the currently selected wall item that can be scaled, dragged etc...
|
||||
|
||||
const cursorPosition = new THREE.Vector3(); // 3D vector for storing the cursor position.
|
||||
const cursorPosition = new THREE.Vector3(); // 3D vector for storing the cursor position.
|
||||
|
||||
const [selectedItemsIndex, setSelectedItemsIndex] = useState<Types.Number | null>(null); // State for tracking the index of the selected item.
|
||||
const { activeLayer, setActiveLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx.
|
||||
const { toggleView, setToggleView } = useToggleView(); // State for toggling between 2D and 3D.
|
||||
const { toolMode, setToolMode } = useToolMode();
|
||||
const { movePoint, setMovePoint } = useMovePoint(); // State that stores a boolean which represents whether the move mode is active or not.
|
||||
const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
|
||||
const { socket } = useSocketStore();
|
||||
const { roofVisibility, setRoofVisibility } = useRoofVisibility();
|
||||
const { wallVisibility, setWallVisibility } = useWallVisibility();
|
||||
const { shadows, setShadows } = useShadows();
|
||||
const { renderDistance, setRenderDistance } = useRenderDistance();
|
||||
const { limitDistance, setLimitDistance } = useLimitDistance();
|
||||
const { updateScene, setUpdateScene } = useUpdateScene();
|
||||
const { walls, setWalls } = useWalls();
|
||||
const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
|
||||
const { activeModule } = useModuleStore();
|
||||
const [selectedItemsIndex, setSelectedItemsIndex] =
|
||||
useState<Types.Number | null>(null); // State for tracking the index of the selected item.
|
||||
const { activeLayer, setActiveLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx.
|
||||
const { toggleView, setToggleView } = useToggleView(); // State for toggling between 2D and 3D.
|
||||
const { toolMode, setToolMode } = useToolMode();
|
||||
const { movePoint, setMovePoint } = useMovePoint(); // State that stores a boolean which represents whether the move mode is active or not.
|
||||
const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
|
||||
const { socket } = useSocketStore();
|
||||
const { roofVisibility, setRoofVisibility } = useRoofVisibility();
|
||||
const { wallVisibility, setWallVisibility } = useWallVisibility();
|
||||
const { shadows, setShadows } = useShadows();
|
||||
const { renderDistance, setRenderDistance } = useRenderDistance();
|
||||
const { limitDistance, setLimitDistance } = useLimitDistance();
|
||||
const { updateScene, setUpdateScene } = useUpdateScene();
|
||||
const { walls, setWalls } = useWalls();
|
||||
const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
|
||||
const { activeModule } = useModuleStore();
|
||||
|
||||
// const loader = new GLTFLoader();
|
||||
// const dracoLoader = new DRACOLoader();
|
||||
// const loader = new GLTFLoader();
|
||||
// const dracoLoader = new DRACOLoader();
|
||||
|
||||
// dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/');
|
||||
// loader.setDRACOLoader(dracoLoader);
|
||||
// dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/');
|
||||
// loader.setDRACOLoader(dracoLoader);
|
||||
|
||||
////////// Assest Configuration Values //////////
|
||||
////////// Assest Configuration Values //////////
|
||||
|
||||
const AssetConfigurations: Types.AssetConfigurations = {
|
||||
arch: {
|
||||
modelUrl: arch,
|
||||
scale: [0.75, 0.75, 0.75],
|
||||
csgscale: [2, 4, 0.5],
|
||||
csgposition: [0, 2, 0],
|
||||
positionY: () => 0,
|
||||
type: "Fixed-Move",
|
||||
},
|
||||
door: {
|
||||
modelUrl: door,
|
||||
scale: [0.75, 0.75, 0.75],
|
||||
csgscale: [2, 4, 0.5],
|
||||
csgposition: [0, 2, 0],
|
||||
positionY: () => 0,
|
||||
type: "Fixed-Move",
|
||||
},
|
||||
window: {
|
||||
modelUrl: Window,
|
||||
scale: [0.75, 0.75, 0.75],
|
||||
csgscale: [5, 3, 0.5],
|
||||
csgposition: [0, 1.5, 0],
|
||||
positionY: (intersectionPoint) => intersectionPoint.point.y,
|
||||
type: "Free-Move",
|
||||
},
|
||||
};
|
||||
const AssetConfigurations: Types.AssetConfigurations = {
|
||||
arch: {
|
||||
modelUrl: arch,
|
||||
scale: [0.75, 0.75, 0.75],
|
||||
csgscale: [2, 4, 0.5],
|
||||
csgposition: [0, 2, 0],
|
||||
positionY: () => 0,
|
||||
type: "Fixed-Move",
|
||||
},
|
||||
door: {
|
||||
modelUrl: door,
|
||||
scale: [0.75, 0.75, 0.75],
|
||||
csgscale: [2, 4, 0.5],
|
||||
csgposition: [0, 2, 0],
|
||||
positionY: () => 0,
|
||||
type: "Fixed-Move",
|
||||
},
|
||||
window: {
|
||||
modelUrl: Window,
|
||||
scale: [0.75, 0.75, 0.75],
|
||||
csgscale: [5, 3, 0.5],
|
||||
csgposition: [0, 1.5, 0],
|
||||
positionY: (intersectionPoint) => intersectionPoint.point.y,
|
||||
type: "Free-Move",
|
||||
},
|
||||
};
|
||||
|
||||
////////// All Toggle's //////////
|
||||
////////// All Toggle's //////////
|
||||
|
||||
useEffect(() => {
|
||||
setRefTextUpdate((prevUpdate: number) => prevUpdate - 1);
|
||||
if (dragPointControls.current) {
|
||||
dragPointControls.current.enabled = false;
|
||||
}
|
||||
if (toggleView) {
|
||||
Layer2DVisibility(
|
||||
activeLayer,
|
||||
floorPlanGroup,
|
||||
floorPlanGroupLine,
|
||||
floorPlanGroupPoint,
|
||||
currentLayerPoint,
|
||||
dragPointControls
|
||||
);
|
||||
} else {
|
||||
setToolMode(null);
|
||||
setDeletePointOrLine(false);
|
||||
setMovePoint(false);
|
||||
loadWalls(lines, setWalls);
|
||||
setUpdateScene(true);
|
||||
line.current = [];
|
||||
}
|
||||
}, [toggleView]);
|
||||
useEffect(() => {
|
||||
setRefTextUpdate((prevUpdate: number) => prevUpdate - 1);
|
||||
if (dragPointControls.current) {
|
||||
dragPointControls.current.enabled = false;
|
||||
}
|
||||
if (toggleView) {
|
||||
Layer2DVisibility(
|
||||
activeLayer,
|
||||
floorPlanGroup,
|
||||
floorPlanGroupLine,
|
||||
floorPlanGroupPoint,
|
||||
currentLayerPoint,
|
||||
dragPointControls
|
||||
);
|
||||
} else {
|
||||
setToolMode(null);
|
||||
setDeletePointOrLine(false);
|
||||
setMovePoint(false);
|
||||
loadWalls(lines, setWalls);
|
||||
setUpdateScene(true);
|
||||
line.current = [];
|
||||
}
|
||||
}, [toggleView]);
|
||||
|
||||
useEffect(() => {
|
||||
THREE.Cache.clear();
|
||||
THREE.Cache.enabled = true;
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
THREE.Cache.clear();
|
||||
THREE.Cache.enabled = true;
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const email = localStorage.getItem("email");
|
||||
const organization = email!.split("@")[1].split(".")[0];
|
||||
useEffect(() => {
|
||||
const email = localStorage.getItem("email");
|
||||
const organization = email!.split("@")[1].split(".")[0];
|
||||
|
||||
async function fetchVisibility() {
|
||||
const visibility = await findEnvironment(
|
||||
organization,
|
||||
localStorage.getItem("userId")!
|
||||
);
|
||||
if (visibility) {
|
||||
setRoofVisibility(visibility.roofVisibility);
|
||||
setWallVisibility(visibility.wallVisibility);
|
||||
setShadows(visibility.shadowVisibility);
|
||||
setRenderDistance(visibility.renderDistance);
|
||||
setLimitDistance(visibility.limitDistance);
|
||||
}
|
||||
}
|
||||
fetchVisibility();
|
||||
}, []);
|
||||
async function fetchVisibility() {
|
||||
const visibility = await findEnvironment(
|
||||
organization,
|
||||
localStorage.getItem("userId")!
|
||||
);
|
||||
if (visibility) {
|
||||
setRoofVisibility(visibility.roofVisibility);
|
||||
setWallVisibility(visibility.wallVisibility);
|
||||
setShadows(visibility.shadowVisibility);
|
||||
setRenderDistance(visibility.renderDistance);
|
||||
setLimitDistance(visibility.limitDistance);
|
||||
}
|
||||
}
|
||||
fetchVisibility();
|
||||
}, []);
|
||||
|
||||
////////// UseFrame is Here //////////
|
||||
////////// UseFrame is Here //////////
|
||||
|
||||
useFrame(() => {
|
||||
if (toolMode) {
|
||||
Draw(
|
||||
state,
|
||||
plane,
|
||||
cursorPosition,
|
||||
floorPlanGroupPoint,
|
||||
floorPlanGroupLine,
|
||||
snappedPoint,
|
||||
isSnapped,
|
||||
isSnappedUUID,
|
||||
line,
|
||||
lines,
|
||||
ispreSnapped,
|
||||
floorPlanGroup,
|
||||
ReferenceLineMesh,
|
||||
LineCreated,
|
||||
setRefTextUpdate,
|
||||
Tube,
|
||||
anglesnappedPoint,
|
||||
isAngleSnapped,
|
||||
toolMode
|
||||
);
|
||||
}
|
||||
});
|
||||
useFrame(() => {
|
||||
if (toolMode) {
|
||||
Draw(
|
||||
state,
|
||||
plane,
|
||||
cursorPosition,
|
||||
floorPlanGroupPoint,
|
||||
floorPlanGroupLine,
|
||||
snappedPoint,
|
||||
isSnapped,
|
||||
isSnappedUUID,
|
||||
line,
|
||||
lines,
|
||||
ispreSnapped,
|
||||
floorPlanGroup,
|
||||
ReferenceLineMesh,
|
||||
LineCreated,
|
||||
setRefTextUpdate,
|
||||
Tube,
|
||||
anglesnappedPoint,
|
||||
isAngleSnapped,
|
||||
toolMode
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
////////// Return //////////
|
||||
////////// Return //////////
|
||||
|
||||
return (
|
||||
<>
|
||||
<Ground grid={grid} plane={plane} />
|
||||
return (
|
||||
<>
|
||||
<Ground grid={grid} plane={plane} />
|
||||
|
||||
<DistanceText key={toggleView} />
|
||||
<DistanceText key={toggleView} />
|
||||
|
||||
<ReferenceDistanceText
|
||||
key={refTextupdate}
|
||||
line={ReferenceLineMesh.current}
|
||||
/>
|
||||
<ReferenceDistanceText
|
||||
key={refTextupdate}
|
||||
line={ReferenceLineMesh.current}
|
||||
/>
|
||||
|
||||
<SocketResponses
|
||||
floorPlanGroup={floorPlanGroup}
|
||||
lines={lines}
|
||||
floorGroup={floorGroup}
|
||||
floorGroupAisle={floorGroupAisle}
|
||||
scene={scene}
|
||||
onlyFloorlines={onlyFloorlines}
|
||||
AssetConfigurations={AssetConfigurations}
|
||||
itemsGroup={itemsGroup}
|
||||
isTempLoader={isTempLoader}
|
||||
tempLoader={tempLoader}
|
||||
currentLayerPoint={currentLayerPoint}
|
||||
floorPlanGroupPoint={floorPlanGroupPoint}
|
||||
floorPlanGroupLine={floorPlanGroupLine}
|
||||
zoneGroup={zoneGroup}
|
||||
dragPointControls={dragPointControls}
|
||||
/>
|
||||
<SocketResponses
|
||||
floorPlanGroup={floorPlanGroup}
|
||||
lines={lines}
|
||||
floorGroup={floorGroup}
|
||||
floorGroupAisle={floorGroupAisle}
|
||||
scene={scene}
|
||||
onlyFloorlines={onlyFloorlines}
|
||||
AssetConfigurations={AssetConfigurations}
|
||||
itemsGroup={itemsGroup}
|
||||
isTempLoader={isTempLoader}
|
||||
tempLoader={tempLoader}
|
||||
currentLayerPoint={currentLayerPoint}
|
||||
floorPlanGroupPoint={floorPlanGroupPoint}
|
||||
floorPlanGroupLine={floorPlanGroupLine}
|
||||
zoneGroup={zoneGroup}
|
||||
dragPointControls={dragPointControls}
|
||||
/>
|
||||
|
||||
<WallsAndWallItems
|
||||
CSGGroup={CSGGroup}
|
||||
AssetConfigurations={AssetConfigurations}
|
||||
setSelectedItemsIndex={setSelectedItemsIndex}
|
||||
selectedItemsIndex={selectedItemsIndex}
|
||||
currentWallItem={currentWallItem}
|
||||
csg={csg}
|
||||
lines={lines}
|
||||
hoveredDeletableWallItem={hoveredDeletableWallItem}
|
||||
/>
|
||||
<WallsAndWallItems
|
||||
CSGGroup={CSGGroup}
|
||||
AssetConfigurations={AssetConfigurations}
|
||||
setSelectedItemsIndex={setSelectedItemsIndex}
|
||||
selectedItemsIndex={selectedItemsIndex}
|
||||
currentWallItem={currentWallItem}
|
||||
csg={csg}
|
||||
lines={lines}
|
||||
hoveredDeletableWallItem={hoveredDeletableWallItem}
|
||||
/>
|
||||
|
||||
<FloorItemsGroup
|
||||
itemsGroup={itemsGroup}
|
||||
hoveredDeletableFloorItem={hoveredDeletableFloorItem}
|
||||
AttachedObject={AttachedObject}
|
||||
floorGroup={floorGroup}
|
||||
tempLoader={tempLoader}
|
||||
isTempLoader={isTempLoader}
|
||||
plane={plane}
|
||||
/>
|
||||
<FloorItemsGroup
|
||||
itemsGroup={itemsGroup}
|
||||
hoveredDeletableFloorItem={hoveredDeletableFloorItem}
|
||||
AttachedObject={AttachedObject}
|
||||
floorGroup={floorGroup}
|
||||
tempLoader={tempLoader}
|
||||
isTempLoader={isTempLoader}
|
||||
plane={plane}
|
||||
/>
|
||||
|
||||
<FloorGroup
|
||||
floorGroup={floorGroup}
|
||||
lines={lines}
|
||||
referencePole={referencePole}
|
||||
hoveredDeletablePillar={hoveredDeletablePillar}
|
||||
/>
|
||||
<FloorGroup
|
||||
floorGroup={floorGroup}
|
||||
lines={lines}
|
||||
referencePole={referencePole}
|
||||
hoveredDeletablePillar={hoveredDeletablePillar}
|
||||
/>
|
||||
|
||||
<FloorPlanGroup
|
||||
floorPlanGroup={floorPlanGroup}
|
||||
floorPlanGroupLine={floorPlanGroupLine}
|
||||
floorPlanGroupPoint={floorPlanGroupPoint}
|
||||
floorGroup={floorGroup}
|
||||
currentLayerPoint={currentLayerPoint}
|
||||
dragPointControls={dragPointControls}
|
||||
hoveredDeletablePoint={hoveredDeletablePoint}
|
||||
hoveredDeletableLine={hoveredDeletableLine}
|
||||
plane={plane}
|
||||
line={line}
|
||||
lines={lines}
|
||||
onlyFloorline={onlyFloorline}
|
||||
onlyFloorlines={onlyFloorlines}
|
||||
ReferenceLineMesh={ReferenceLineMesh}
|
||||
LineCreated={LineCreated}
|
||||
isSnapped={isSnapped}
|
||||
ispreSnapped={ispreSnapped}
|
||||
snappedPoint={snappedPoint}
|
||||
isSnappedUUID={isSnappedUUID}
|
||||
isAngleSnapped={isAngleSnapped}
|
||||
anglesnappedPoint={anglesnappedPoint}
|
||||
/>
|
||||
<FloorPlanGroup
|
||||
floorPlanGroup={floorPlanGroup}
|
||||
floorPlanGroupLine={floorPlanGroupLine}
|
||||
floorPlanGroupPoint={floorPlanGroupPoint}
|
||||
floorGroup={floorGroup}
|
||||
currentLayerPoint={currentLayerPoint}
|
||||
dragPointControls={dragPointControls}
|
||||
hoveredDeletablePoint={hoveredDeletablePoint}
|
||||
hoveredDeletableLine={hoveredDeletableLine}
|
||||
plane={plane}
|
||||
line={line}
|
||||
lines={lines}
|
||||
onlyFloorline={onlyFloorline}
|
||||
onlyFloorlines={onlyFloorlines}
|
||||
ReferenceLineMesh={ReferenceLineMesh}
|
||||
LineCreated={LineCreated}
|
||||
isSnapped={isSnapped}
|
||||
ispreSnapped={ispreSnapped}
|
||||
snappedPoint={snappedPoint}
|
||||
isSnappedUUID={isSnappedUUID}
|
||||
isAngleSnapped={isAngleSnapped}
|
||||
anglesnappedPoint={anglesnappedPoint}
|
||||
/>
|
||||
|
||||
<ZoneGroup />
|
||||
<ZoneGroup />
|
||||
|
||||
<FloorGroupAilse
|
||||
floorGroupAisle={floorGroupAisle}
|
||||
plane={plane}
|
||||
floorPlanGroupLine={floorPlanGroupLine}
|
||||
floorPlanGroupPoint={floorPlanGroupPoint}
|
||||
line={line}
|
||||
lines={lines}
|
||||
currentLayerPoint={currentLayerPoint}
|
||||
dragPointControls={dragPointControls}
|
||||
floorPlanGroup={floorPlanGroup}
|
||||
ReferenceLineMesh={ReferenceLineMesh}
|
||||
LineCreated={LineCreated}
|
||||
isSnapped={isSnapped}
|
||||
ispreSnapped={ispreSnapped}
|
||||
snappedPoint={snappedPoint}
|
||||
isSnappedUUID={isSnappedUUID}
|
||||
isAngleSnapped={isAngleSnapped}
|
||||
anglesnappedPoint={anglesnappedPoint}
|
||||
/>
|
||||
<FloorGroupAilse
|
||||
floorGroupAisle={floorGroupAisle}
|
||||
plane={plane}
|
||||
floorPlanGroupLine={floorPlanGroupLine}
|
||||
floorPlanGroupPoint={floorPlanGroupPoint}
|
||||
line={line}
|
||||
lines={lines}
|
||||
currentLayerPoint={currentLayerPoint}
|
||||
dragPointControls={dragPointControls}
|
||||
floorPlanGroup={floorPlanGroup}
|
||||
ReferenceLineMesh={ReferenceLineMesh}
|
||||
LineCreated={LineCreated}
|
||||
isSnapped={isSnapped}
|
||||
ispreSnapped={ispreSnapped}
|
||||
snappedPoint={snappedPoint}
|
||||
isSnappedUUID={isSnappedUUID}
|
||||
isAngleSnapped={isAngleSnapped}
|
||||
anglesnappedPoint={anglesnappedPoint}
|
||||
/>
|
||||
|
||||
<MeasurementTool />
|
||||
<MeasurementTool />
|
||||
|
||||
<NavMesh lines={lines} />
|
||||
|
||||
</>
|
||||
);
|
||||
<NavMesh lines={lines} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,169 +1,337 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import * as THREE from 'three';
|
||||
import { useEventsStore } from '../../../../../store/simulation/useEventsStore';
|
||||
import useModuleStore from '../../../../../store/useModuleStore';
|
||||
import { TransformControls } from '@react-three/drei';
|
||||
import { detectModifierKeys } from '../../../../../utils/shortcutkeys/detectModifierKeys';
|
||||
import { useSelectedEventSphere, useSelectedEventData } from '../../../../../store/simulation/useSimulationStore';
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useEventsStore } from "../../../../../store/simulation/useEventsStore";
|
||||
import useModuleStore from "../../../../../store/useModuleStore";
|
||||
import { TransformControls, useGLTF } from "@react-three/drei";
|
||||
import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
|
||||
import {
|
||||
useSelectedEventSphere,
|
||||
useSelectedEventData,
|
||||
} from "../../../../../store/simulation/useSimulationStore";
|
||||
import PickDropPoints from "../../../../../components/ui/arm/PickDropPoints";
|
||||
|
||||
import armPick from "../../../../../assets/gltf-glb/arm_ui_pick.glb";
|
||||
import armDrop from "../../../../../assets/gltf-glb/arm_ui_drop.glb";
|
||||
import useDraggableGLTF from "../../../../../components/ui/arm/useDraggableGLTF";
|
||||
|
||||
interface Process {
|
||||
startPoint: number[] | null;
|
||||
endPoint: number[] | null;
|
||||
}
|
||||
|
||||
interface Action {
|
||||
actionUuid: string;
|
||||
actionName: string;
|
||||
actionType: string;
|
||||
process: Process;
|
||||
triggers: any[];
|
||||
}
|
||||
|
||||
interface Point {
|
||||
uuid: string;
|
||||
position: number[];
|
||||
rotation: number[];
|
||||
actions: Action[];
|
||||
}
|
||||
|
||||
interface RoboticArmEvent {
|
||||
modelUuid: string;
|
||||
modelName: string;
|
||||
position: number[];
|
||||
rotation: number[];
|
||||
state: string;
|
||||
type: string;
|
||||
speed: number;
|
||||
point: Point;
|
||||
}
|
||||
function PointsCreator() {
|
||||
const { events, updatePoint, getPointByUuid, getEventByModelUuid } = useEventsStore();
|
||||
const { activeModule } = useModuleStore();
|
||||
const transformRef = useRef<any>(null);
|
||||
const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
|
||||
const sphereRefs = useRef<{ [key: string]: THREE.Mesh }>({});
|
||||
const { selectedEventSphere, setSelectedEventSphere, clearSelectedEventSphere } = useSelectedEventSphere();
|
||||
const { setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
|
||||
const { events, updatePoint, getPointByUuid, getEventByModelUuid } =
|
||||
useEventsStore();
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedEventSphere) {
|
||||
const eventData = getEventByModelUuid(selectedEventSphere.userData.modelUuid);
|
||||
if (eventData) {
|
||||
setSelectedEventData(
|
||||
eventData,
|
||||
selectedEventSphere.userData.pointUuid
|
||||
);
|
||||
} else {
|
||||
clearSelectedEventData();
|
||||
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 armUiDrop = useGLTF(armDrop) as any;
|
||||
|
||||
const updatePointToState = (obj: THREE.Object3D) => {
|
||||
const { modelUuid, pointUuid, actionType, actionUuid } = obj.userData;
|
||||
const newPosition = obj.position.toArray();
|
||||
|
||||
setArmBotStatusSample((prev) =>
|
||||
prev.map((event) => {
|
||||
if (event.modelUuid === modelUuid) {
|
||||
const updatedActions = event.point.actions.map((action) => {
|
||||
if (action.actionUuid === actionUuid) {
|
||||
const updatedProcess = { ...action.process };
|
||||
if (actionType === "pick") {
|
||||
updatedProcess.startPoint = newPosition;
|
||||
} else if (actionType === "drop") {
|
||||
updatedProcess.endPoint = newPosition;
|
||||
}
|
||||
return {
|
||||
...action,
|
||||
process: updatedProcess,
|
||||
};
|
||||
}
|
||||
} else {
|
||||
clearSelectedEventData();
|
||||
return action;
|
||||
});
|
||||
|
||||
return {
|
||||
...event,
|
||||
point: {
|
||||
...event.point,
|
||||
actions: updatedActions,
|
||||
},
|
||||
};
|
||||
}
|
||||
}, [selectedEventSphere]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
const keyCombination = detectModifierKeys(e);
|
||||
if (!selectedEventSphere) return;
|
||||
if (keyCombination === "G") {
|
||||
setTransformMode((prev) => (prev === "translate" ? null : "translate"));
|
||||
}
|
||||
if (keyCombination === "R") {
|
||||
setTransformMode((prev) => (prev === "rotate" ? null : "rotate"));
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}, [selectedEventSphere]);
|
||||
|
||||
const updatePointToState = (selectedEventSphere: THREE.Mesh) => {
|
||||
let point = JSON.parse(JSON.stringify(getPointByUuid(selectedEventSphere.userData.modelUuid, selectedEventSphere.userData.pointUuid)));
|
||||
if (point) {
|
||||
point.position = [selectedEventSphere.position.x, selectedEventSphere.position.y, selectedEventSphere.position.z];
|
||||
updatePoint(selectedEventSphere.userData.modelUuid, selectedEventSphere.userData.pointUuid, point)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{activeModule === 'simulation' &&
|
||||
<>
|
||||
<group name='EventPointsGroup' >
|
||||
{events.map((event, i) => {
|
||||
if (event.type === 'transfer') {
|
||||
return (
|
||||
<group key={i} position={new THREE.Vector3(...event.position)}>
|
||||
{event.points.map((point, j) => (
|
||||
<mesh
|
||||
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
|
||||
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') {
|
||||
return (
|
||||
<group key={i} position={new THREE.Vector3(...event.position)}>
|
||||
<mesh
|
||||
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="green" />
|
||||
</mesh>
|
||||
</group>
|
||||
);
|
||||
} else if (event.type === 'machine') {
|
||||
return (
|
||||
<group key={i} position={new THREE.Vector3(...event.position)}>
|
||||
<mesh
|
||||
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 {
|
||||
return null;
|
||||
}
|
||||
})}
|
||||
</group>
|
||||
{(selectedEventSphere && transformMode) &&
|
||||
<TransformControls ref={transformRef} object={selectedEventSphere} mode={transformMode} onMouseUp={(e) => { updatePointToState(selectedEventSphere) }} />
|
||||
}
|
||||
</>
|
||||
}
|
||||
</>
|
||||
return event;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const { handlePointerDown } = useDraggableGLTF(updatePointToState);
|
||||
|
||||
const { activeModule } = useModuleStore();
|
||||
const transformRef = useRef<any>(null);
|
||||
const [transformMode, setTransformMode] = useState<
|
||||
"translate" | "rotate" | null
|
||||
>(null);
|
||||
const sphereRefs = useRef<{ [key: string]: THREE.Mesh }>({});
|
||||
const {
|
||||
selectedEventSphere,
|
||||
setSelectedEventSphere,
|
||||
clearSelectedEventSphere,
|
||||
} = useSelectedEventSphere();
|
||||
const { setSelectedEventData, clearSelectedEventData } =
|
||||
useSelectedEventData();
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedEventSphere) {
|
||||
const eventData = getEventByModelUuid(
|
||||
selectedEventSphere.userData.modelUuid
|
||||
);
|
||||
if (eventData) {
|
||||
setSelectedEventData(eventData, selectedEventSphere.userData.pointUuid);
|
||||
} else {
|
||||
clearSelectedEventData();
|
||||
}
|
||||
} else {
|
||||
clearSelectedEventData();
|
||||
}
|
||||
}, [selectedEventSphere]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
const keyCombination = detectModifierKeys(e);
|
||||
if (!selectedEventSphere) return;
|
||||
if (keyCombination === "G") {
|
||||
setTransformMode((prev) => (prev === "translate" ? null : "translate"));
|
||||
}
|
||||
if (keyCombination === "R") {
|
||||
setTransformMode((prev) => (prev === "rotate" ? null : "rotate"));
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}, [selectedEventSphere]);
|
||||
|
||||
const [selectedPoint, setSelectedPoint] = useState<THREE.Mesh | null>(null);
|
||||
|
||||
const getDefaultPositions = (modelUuid: string) => {
|
||||
const modelData = getModelByUuid(modelUuid);
|
||||
if (modelData) {
|
||||
const baseX = modelData.position?.[0] || 0;
|
||||
const baseY = modelData.position?.[1] + 2.8 || 1.5;
|
||||
const baseZ = modelData.position?.[2] || 0;
|
||||
return {
|
||||
pick: [baseX, baseY, baseZ - 2.5],
|
||||
drop: [baseX, baseY, baseZ - 0.5],
|
||||
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;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log("armBotStatusSample: ", armBotStatusSample);
|
||||
}, [armBotStatusSample]);
|
||||
return (
|
||||
<>
|
||||
{activeModule === "simulation" && (
|
||||
<>
|
||||
<group name="EventPointsGroup">
|
||||
{armBotStatusSample.map((event, i) => {
|
||||
if (event.type === "roboticArm") {
|
||||
const defaultPositions = getDefaultPositions(event.modelUuid);
|
||||
const isSelected =
|
||||
selectedPoint?.userData?.modelUuid === event.modelUuid;
|
||||
|
||||
return (
|
||||
<group
|
||||
key={i}
|
||||
position={new THREE.Vector3(...event.position)}
|
||||
>
|
||||
<mesh
|
||||
uuid={event.point.uuid}
|
||||
ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedEventSphere(
|
||||
sphereRefs.current[event.point.uuid]
|
||||
);
|
||||
setSelectedPoint(e.object as THREE.Mesh);
|
||||
}}
|
||||
onPointerMissed={() => {
|
||||
clearSelectedEventSphere();
|
||||
setTransformMode(null);
|
||||
}}
|
||||
position={new THREE.Vector3(...defaultPositions.default)}
|
||||
userData={{
|
||||
modelUuid: event.modelUuid,
|
||||
pointUuid: event.point.uuid,
|
||||
}}
|
||||
>
|
||||
<sphereGeometry args={[0.1, 16, 16]} />
|
||||
<meshStandardMaterial
|
||||
color={isSelected ? "yellow" : "green"}
|
||||
/>
|
||||
</mesh>
|
||||
{event.point.actions.map((action) => {
|
||||
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={selectedPoint}
|
||||
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={selectedPoint}
|
||||
handlePointerDown={handlePointerDown}
|
||||
isSelected={isSelected}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</group>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
})}
|
||||
</group>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default PointsCreator;
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user