Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' into simulation

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-04-11 18:19:45 +05:30
parent 3eecf30541 d4a451c19f
commit d76ae8b8b4
7 changed files with 419 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/package-lock.json generated
View File

@@ -48,6 +48,7 @@
"zustand": "^5.0.0-rc.2" "zustand": "^5.0.0-rc.2"
}, },
"devDependencies": { "devDependencies": {
"@types/html2canvas": "^1.0.0",
"@types/node": "^22.9.1", "@types/node": "^22.9.1",
"@types/three": "^0.169.0", "@types/three": "^0.169.0",
"axios": "^1.8.4", "axios": "^1.8.4",
@@ -6490,6 +6491,17 @@
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
"integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==" "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg=="
}, },
"node_modules/@types/html2canvas": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@types/html2canvas/-/html2canvas-1.0.0.tgz",
"integrity": "sha512-BJpVf+FIN9UERmzhbtUgpXj6XBZpG67FMgBLLoj9HZKd9XifcCpSV+UnFcwTZfEyun4U/KmCrrVOG7829L589w==",
"deprecated": "This is a stub types definition. html2canvas provides its own type definitions, so you do not need this installed.",
"dev": true,
"license": "MIT",
"dependencies": {
"html2canvas": "*"
}
},
"node_modules/@types/http-errors": { "node_modules/@types/http-errors": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",

1
app/package.json
View File

@@ -70,6 +70,7 @@
] ]
}, },
"devDependencies": { "devDependencies": {
"@types/html2canvas": "^1.0.0",
"@types/node": "^22.9.1", "@types/node": "^22.9.1",
"@types/three": "^0.169.0", "@types/three": "^0.169.0",
"axios": "^1.8.4", "axios": "^1.8.4",

14
app/src/components/layout/sidebarLeft/visualization/Templates.tsx
View File

@@ -26,9 +26,14 @@ const Templates = () => {
templateData(); templateData();
}, []); }, []);
const handleDeleteTemplate = async (id: string) => { const handleDeleteTemplate = async (
e: React.MouseEvent<HTMLButtonElement>,
id: string
) => {
try { try {
e.stopPropagation();
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
let deleteTemplate = { let deleteTemplate = {
organization: organization, organization: organization,
@@ -49,7 +54,6 @@ const Templates = () => {
const handleLoadTemplate = async (template: any) => { const handleLoadTemplate = async (template: any) => {
try { try {
if (selectedZone.zoneName === "") return; if (selectedZone.zoneName === "") return;
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
@@ -91,10 +95,10 @@ const Templates = () => {
<div <div
key={template.id} key={template.id}
className="template-item" className="template-item"
onClick={() => handleLoadTemplate(template)}
> >
{template?.snapshot && ( {template?.snapshot && (
<div className="template-image-container"> <div className="template-image-container" onClick={() => handleLoadTemplate(template)}>
<img <img
src={template.snapshot} src={template.snapshot}
alt={`${template.name} preview`} alt={`${template.name} preview`}
@@ -108,7 +112,7 @@ const Templates = () => {
<RenameInput value={`Template ${index + 1}`} /> <RenameInput value={`Template ${index + 1}`} />
</div> </div>
<button <button
onClick={() => handleDeleteTemplate(template.id)} onClick={(e) => handleDeleteTemplate(e, template.id)}
className="delete-button" className="delete-button"
aria-label="Delete template" aria-label="Delete template"
> >

2
app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
View File

@@ -33,7 +33,7 @@ const WidgetsFloating = () => {
}; };
return ( return (
<div className="floatingWidgets-wrapper"> <div className="floatingWidgets-wrapper widgets-wrapper">
{/* {widgets.map((widget) => ( {/* {widgets.map((widget) => (
<div <div
key={widget.id} key={widget.id}

271
app/src/components/ui/componets/Dropped3dWidget.tsx
View File

@@ -60,7 +60,9 @@ export default function Dropped3dWidgets() {
let [floorPlanesVertical, setFloorPlanesVertical] = useState( let [floorPlanesVertical, setFloorPlanesVertical] = useState(
new THREE.Plane(new THREE.Vector3(0, 1, 0)) new THREE.Plane(new THREE.Vector3(0, 1, 0))
); );
const [intersectcontextmenu, setintersectcontextmenu] = useState<number | undefined>();
const [horizontalX, setHorizontalX] = useState<number | undefined>();
const [horizontalZ, setHorizontalZ] = useState<number | undefined>();
const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || []; const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
useEffect(() => { useEffect(() => {
@@ -177,7 +179,6 @@ export default function Dropped3dWidgets() {
}; };
const onDrop = (event: any) => { const onDrop = (event: any) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
@@ -190,13 +191,18 @@ export default function Dropped3dWidgets() {
if (!newWidget || !widgetSelect.startsWith("ui")) return; if (!newWidget || !widgetSelect.startsWith("ui")) return;
// ✅ Extract 2D drop position // ✅ Extract 2D drop position
const [x, , z] = newWidget.position; let [x, y, z] = newWidget.position;
// ✅ Clamp Y to at least 0
y = Math.max(y, 0);
newWidget.position = [x, y, z];
// ✅ Prepare polygon from selectedZone.points // ✅ Prepare polygon from selectedZone.points
const points3D = selectedZone.points as Array<[number, number, number]>; const points3D = selectedZone.points as Array<[number, number, number]>;
const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]); const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]);
const isInside = isPointInPolygon([x, z], zonePolygonXZ); const isInside = isPointInPolygon([x, z], zonePolygonXZ);
// ✅ Remove temp widget // ✅ Remove temp widget
const prevWidgets = useZoneWidgetStore.getState().zoneWidgetData[selectedZone.zoneId] || []; const prevWidgets = useZoneWidgetStore.getState().zoneWidgetData[selectedZone.zoneId] || [];
const cleanedWidgets = prevWidgets.filter(w => w.id !== newWidget.id); const cleanedWidgets = prevWidgets.filter(w => w.id !== newWidget.id);
@@ -206,12 +212,14 @@ export default function Dropped3dWidgets() {
[selectedZone.zoneId]: cleanedWidgets, [selectedZone.zoneId]: cleanedWidgets,
}, },
})); }));
// if (!isInside) {
// (Optional) Prevent adding if dropped outside zone
// if (!isInside) {
// createdWidgetRef.current = null; // createdWidgetRef.current = null;
// return; // Stop here // return;
// } // }
// ✅ Add widget if inside polygon
// ✅ Add widget
addWidget(selectedZone.zoneId, newWidget); addWidget(selectedZone.zoneId, newWidget);
const add3dWidget = { const add3dWidget = {
@@ -228,6 +236,7 @@ export default function Dropped3dWidgets() {
}; };
canvasElement.addEventListener("dragenter", handleDragEnter); canvasElement.addEventListener("dragenter", handleDragEnter);
canvasElement.addEventListener("dragover", handleDragOver); canvasElement.addEventListener("dragover", handleDragOver);
canvasElement.addEventListener("drop", onDrop); canvasElement.addEventListener("drop", onDrop);
@@ -337,22 +346,34 @@ export default function Dropped3dWidgets() {
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
const handleMouseDown = (event: MouseEvent) => { const handleMouseDown = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return; if (!rightClickSelected || !rightSelect) return;
const selectedZoneId = Object.keys(zoneWidgetData).find(
(zoneId: string) =>
zoneWidgetData[zoneId].some(
(widget: WidgetData) => widget.id === rightClickSelected
)
);
if (!selectedZoneId) return;
const selectedWidget = zoneWidgetData[selectedZoneId].find(
(widget: WidgetData) => widget.id === rightClickSelected
);
if (!selectedWidget) return
// let points = [];
// points.push(new THREE.Vector3(0, 0, 0));
// points.push(new THREE.Vector3(0, selectedWidget.position[1], 0));
// const newgeometry = new THREE.BufferGeometry().setFromPoints(points);
// let vector = new THREE.Vector3();
// camera.getWorldDirection(vector);
// let cameraDirection = vector;
// let newPlane = new THREE.Plane(cameraDirection);
// floorPlanesVertical = newPlane;
// setFloorPlanesVertical(newPlane);
// const intersect1 = raycaster?.ray?.intersectPlane(
// floorPlanesVertical,
// planeIntersect.current
// );
const cameraDirection = new THREE.Vector3(); // setintersectcontextmenu(intersect1.y);
camera.getWorldDirection(cameraDirection);
// Plane normal should be perpendicular to screen (XZ move), so use screen right direction
const right = new THREE.Vector3();
camera.getWorldDirection(cameraDirection);
cameraDirection.y = 0;
cameraDirection.normalize();
right.crossVectors(new THREE.Vector3(0, 1, 0), cameraDirection).normalize();
// Create a plane that allows vertical movement
const verticalPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(right, new THREE.Vector3(0, 0, 0));
setFloorPlanesVertical(verticalPlane);
if (rightSelect === "RotateX" || rightSelect === "RotateY") { if (rightSelect === "RotateX" || rightSelect === "RotateY") {
mouseStartRef.current = { x: event.clientX, y: event.clientY }; mouseStartRef.current = { x: event.clientX, y: event.clientY };
@@ -370,6 +391,7 @@ export default function Dropped3dWidgets() {
rotationStartRef.current = selectedWidget.rotation || [0, 0, 0]; rotationStartRef.current = selectedWidget.rotation || [0, 0, 0];
} }
} }
}; };
const handleMouseMove = (event: MouseEvent) => { const handleMouseMove = (event: MouseEvent) => {
@@ -392,90 +414,110 @@ export default function Dropped3dWidgets() {
raycaster.setFromCamera(mouse, camera); raycaster.setFromCamera(mouse, camera);
if (rightSelect === "Horizontal Move" &&raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) { if (rightSelect === "Horizontal Move") {
const points3D = selectedZone.points as Array<[number, number, number]>; const intersect = raycaster.ray.intersectPlane(plane.current, planeIntersect.current);
const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]); if (
const newPosition: [number, number, number] = [ intersect &&
planeIntersect.current.x, typeof horizontalX === "number" &&
selectedWidget.position[1], typeof horizontalZ === "number"
planeIntersect.current.z, ) {
]; const selectedZoneId = Object.keys(zoneWidgetData).find(zoneId =>
const isInside = isPointInPolygon( zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
[newPosition[0], newPosition[2]], );
zonePolygonXZ if (!selectedZoneId) return;
);
// if (isInside) { const selectedWidget = zoneWidgetData[selectedZoneId].find(widget => widget.id === rightClickSelected);
if (!selectedWidget) return;
const newPosition: [number, number, number] = [
intersect.x + horizontalX,
selectedWidget.position[1],
intersect.z + horizontalZ,
];
updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition); updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
// } }
} }
if (rightSelect === "Vertical Move") { if (rightSelect === "Vertical Move") {
if (raycaster.ray.intersectPlane(floorPlanesVertical, planeIntersect.current)) { const intersect = raycaster.ray.intersectPlane(floorPlanesVertical, planeIntersect.current);
const currentY = selectedWidget.position[1];
const newY = planeIntersect.current.y;
console.log('planeIntersect.current: ', planeIntersect.current);
const deltaY = newY - currentY; if (intersect && typeof intersectcontextmenu === "number") {
const diff = intersect.y - intersectcontextmenu;
const unclampedY = selectedWidget.position[1] + diff;
const newY = Math.max(0, unclampedY); // Prevent going below floor (y=0)
// Reject if jump is too large (safety check) setintersectcontextmenu(intersect.y);
if (Math.abs(deltaY) > 200) return;
// Clamp jump or apply smoothing const newPosition: [number, number, number] = [
const clampedY = currentY + THREE.MathUtils.clamp(deltaY, -10, 10); selectedWidget.position[0],
newY,
selectedWidget.position[2],
];
if (clampedY > 0) { updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
updateWidgetPosition(selectedZoneId, rightClickSelected, [
selectedWidget.position[0],
clampedY,
selectedWidget.position[2],
]);
}
} }
} }
if (rightSelect === "RotateX") { if (rightSelect?.startsWith("Rotate")) {
const axis = rightSelect.slice(-1).toLowerCase(); // "x", "y", or "z"
const currentX = event.pageX; const currentX = event.pageX;
const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0; const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
setPrevX(currentX); setPrevX(currentX);
if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) { if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
const newRotation: [number, number, number] = [ const index = axis === "x" ? 0 : axis === "y" ? 1 : 2;
selectedWidget.rotation[0] + 0.05 * sign, const currentRotation = selectedWidget.rotation as [number, number, number]; // assert type
selectedWidget.rotation[1], const newRotation: [number, number, number] = [...currentRotation];
selectedWidget.rotation[2], newRotation[index] += 0.05 * sign;
];
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation); updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
} }
} }
// if (rightSelect === "RotateX") {
//
// const currentX = event.pageX;
// const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
//
// setPrevX(currentX);
// if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
//
// const newRotation: [number, number, number] = [
// selectedWidget.rotation[0] + 0.05 * sign,
// selectedWidget.rotation[1],
// selectedWidget.rotation[2],
// ];
// updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
// }
// }
// if (rightSelect === "RotateY") {
// const currentX = event.pageX;
// const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
// setPrevX(currentX);
// if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
// const newRotation: [number, number, number] = [
// selectedWidget.rotation[0],
// selectedWidget.rotation[1] + 0.05 * sign,
// selectedWidget.rotation[2],
// ];
if (rightSelect === "RotateY") { // updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
const currentX = event.pageX; // }
const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0; // }
setPrevX(currentX); // if (rightSelect === "RotateZ") {
if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) { // const currentX = event.pageX;
const newRotation: [number, number, number] = [ // const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
selectedWidget.rotation[0] , // setPrevX(currentX);
selectedWidget.rotation[1]+ 0.05 * sign, // if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
selectedWidget.rotation[2], // const newRotation: [number, number, number] = [
]; // selectedWidget.rotation[0],
// selectedWidget.rotation[1],
// selectedWidget.rotation[2] + 0.05 * sign,
// ];
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation); // updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
} // }
} // }
if (rightSelect === "RotateZ") {
const currentX = event.pageX;
const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
setPrevX(currentX);
if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
const newRotation: [number, number, number] = [
selectedWidget.rotation[0] ,
selectedWidget.rotation[1],
selectedWidget.rotation[2]+ 0.05 * sign,
];
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
}
}
}; };
const handleMouseUp = () => { const handleMouseUp = () => {
if (!rightClickSelected || !rightSelect) return; if (!rightClickSelected || !rightSelect) return;
@@ -564,23 +606,60 @@ export default function Dropped3dWidgets() {
}; };
}, [rightClickSelected, rightSelect, zoneWidgetData, gl]); }, [rightClickSelected, rightSelect, zoneWidgetData, gl]);
const handleRightClick3d = (event: React.MouseEvent, id: string) => {
event.preventDefault();
const canvasElement = document.getElementById("real-time-vis-canvas");
if (!canvasElement) throw new Error("Canvas element not found");
const canvasRect = canvasElement.getBoundingClientRect();
const relativeX = event.clientX - canvasRect.left;
const relativeY = event.clientY - canvasRect.top;
setEditWidgetOptions(true);
setRightClickSelected(id);
setTop(relativeY);
setLeft(relativeX);
const selectedZoneId = Object.keys(zoneWidgetData).find(zoneId =>
zoneWidgetData[zoneId].some(widget => widget.id === id)
);
if (!selectedZoneId) return;
const selectedWidget = zoneWidgetData[selectedZoneId].find(widget => widget.id === id);
if (!selectedWidget) return;
const { top, left, width, height } = canvasElement.getBoundingClientRect();
mouse.x = ((event.clientX - left) / width) * 2 - 1;
mouse.y = -((event.clientY - top) / height) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const cameraDirection = new THREE.Vector3();
camera.getWorldDirection(cameraDirection);
const verticalPlane = new THREE.Plane(cameraDirection);
setFloorPlanesVertical(verticalPlane);
const intersectPoint = raycaster.ray.intersectPlane(verticalPlane, planeIntersect.current);
if (intersectPoint) {
setintersectcontextmenu(intersectPoint.y);
}
const intersect2 = raycaster.ray.intersectPlane(plane.current, planeIntersect.current);
if (intersect2) {
const xDiff = -intersect2.x + selectedWidget.position[0];
const zDiff = -intersect2.z + selectedWidget.position[2];
setHorizontalX(xDiff);
setHorizontalZ(zDiff);
}
};
return ( return (
<> <>
{activeZoneWidgets.map( {activeZoneWidgets.map(
({ id, type, position, rotation = [0, 0, 0] }: WidgetData) => { ({ id, type, position, rotation = [0, 0, 0] }: WidgetData) => {
const handleRightClick = (event: React.MouseEvent, id: string) => { const handleRightClick = (event: React.MouseEvent, id: string) => {
event.preventDefault(); handleRightClick3d(event, id)
const canvasElement = document.getElementById(
"real-time-vis-canvas"
);
if (!canvasElement) throw new Error("Canvas element not found");
const canvasRect = canvasElement.getBoundingClientRect();
const relativeX = event.clientX - canvasRect.left;
const relativeY = event.clientY - canvasRect.top;
setEditWidgetOptions(true);
setRightClickSelected(id);
setTop(relativeY);
setLeft(relativeX);
}; };
switch (type) { switch (type) {

1
app/src/components/ui/componets/RealTimeVisulization.tsx
View File

@@ -286,7 +286,6 @@ const RealTimeVisulization: React.FC = () => {
"Horizontal Move", "Horizontal Move",
"RotateX", "RotateX",
"RotateY", "RotateY",
"RotateZ",
"Delete", "Delete",
]} ]}
/> />

357
app/src/modules/collaboration/collabCams.tsx
View File

@@ -10,190 +10,227 @@ import { useNavigate } from "react-router-dom";
import { Html } from "@react-three/drei"; import { Html } from "@react-three/drei";
import CollabUserIcon from "./collabUserIcon"; import CollabUserIcon from "./collabUserIcon";
import { getAvatarColor } from "./users/functions/getAvatarColor"; import { getAvatarColor } from "./users/functions/getAvatarColor";
import useModuleStore from "../../store/useModuleStore";
const CamModelsGroup = () => { const CamModelsGroup = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const groupRef = useRef<THREE.Group>(null); const groupRef = useRef<THREE.Group>(null);
const email = localStorage.getItem("email"); const email = localStorage.getItem("email");
const { activeUsers, setActiveUsers } = useActiveUsers(); const { setActiveUsers } = useActiveUsers();
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const { activeModule } = useModuleStore();
const loader = new GLTFLoader(); const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader(); const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/"); dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/");
loader.setDRACOLoader(dracoLoader); loader.setDRACOLoader(dracoLoader);
const [cams, setCams] = useState<any[]>([]); const [cams, setCams] = useState<any[]>([]);
const [models, setModels] = useState<Record<string, { targetPosition: THREE.Vector3; targetRotation: THREE.Euler }>>({}); const [models, setModels] = useState<
Record<
string,
{ targetPosition: THREE.Vector3; targetRotation: THREE.Euler }
>
>({});
const dedupeCams = (cams: any[]) => { const dedupeCams = (cams: any[]) => {
const seen = new Set(); const seen = new Set();
return cams.filter((cam) => { return cams.filter((cam) => {
if (seen.has(cam.uuid)) return false; if (seen.has(cam.uuid)) return false;
seen.add(cam.uuid); seen.add(cam.uuid);
return true; return true;
}); });
}; };
const dedupeUsers = (users: any[]) => { const dedupeUsers = (users: any[]) => {
const seen = new Set(); const seen = new Set();
return users.filter((user) => { return users.filter((user) => {
if (seen.has(user._id)) return false; if (seen.has(user._id)) return false;
seen.add(user._id); seen.add(user._id);
return true; return true;
}); });
}; };
useEffect(() => { useEffect(() => {
if (!email) navigate("/"); if (!email) navigate("/");
if (!socket) return; if (!socket) return;
const organization = email!.split("@")[1].split(".")[0]; const organization = email!.split("@")[1].split(".")[0];
socket.on("userConnectResponse", (data: any) => { socket.on("userConnectResponse", (data: any) => {
if (!groupRef.current) return; if (!groupRef.current) return;
if (data.data.userData.email === email) return; if (data.data.userData.email === email) return;
if (socket.id === data.socketId || organization !== data.organization) return; if (socket.id === data.socketId || organization !== data.organization)
return;
const model = groupRef.current.getObjectByProperty("uuid", data.data.userData._id); const model = groupRef.current.getObjectByProperty(
if (model) { "uuid",
groupRef.current.remove(model); data.data.userData._id
} );
if (model) {
groupRef.current.remove(model);
}
loader.load(camModel, (gltf) => { loader.load(camModel, (gltf) => {
const newModel = gltf.scene.clone(); const newModel = gltf.scene.clone();
newModel.uuid = data.data.userData._id; newModel.uuid = data.data.userData._id;
newModel.position.set( newModel.position.set(
data.data.position.x, data.data.position.x,
data.data.position.y, data.data.position.y,
data.data.position.z data.data.position.z
); );
newModel.rotation.set( newModel.rotation.set(
data.data.rotation.x, data.data.rotation.x,
data.data.rotation.y, data.data.rotation.y,
data.data.rotation.z data.data.rotation.z
); );
newModel.userData = data.data.userData; newModel.userData = data.data.userData;
setCams((prev) => dedupeCams([...prev, newModel])); setCams((prev) => dedupeCams([...prev, newModel]));
setActiveUsers((prev: any) => setActiveUsers((prev: any) =>
dedupeUsers([...prev, data.data.userData]) dedupeUsers([...prev, data.data.userData])
); );
}); });
}); });
socket.on("userDisConnectResponse", (data: any) => { socket.on("userDisConnectResponse", (data: any) => {
if (!groupRef.current) return; if (!groupRef.current) return;
if (socket.id === data.socketId || organization !== data.organization) return; if (socket.id === data.socketId || organization !== data.organization)
return;
setCams((prev) => setCams((prev) =>
prev.filter((cam) => cam.uuid !== data.data.userData._id) prev.filter((cam) => cam.uuid !== data.data.userData._id)
); );
setActiveUsers((prev: any) => setActiveUsers((prev: any) =>
prev.filter((user: any) => user._id !== data.data.userData._id) prev.filter((user: any) => user._id !== data.data.userData._id)
); );
}); });
socket.on("cameraUpdateResponse", (data: any) => { socket.on("cameraUpdateResponse", (data: any) => {
if ( if (
!groupRef.current || !groupRef.current ||
socket.id === data.socketId || socket.id === data.socketId ||
organization !== data.organization organization !== data.organization
) )
return; return;
setModels((prev) => ({ setModels((prev) => ({
...prev, ...prev,
[data.data.userId]: { [data.data.userId]: {
targetPosition: new THREE.Vector3( targetPosition: new THREE.Vector3(
data.data.position.x, data.data.position.x,
data.data.position.y, data.data.position.y,
data.data.position.z data.data.position.z
), ),
targetRotation: new THREE.Euler( targetRotation: new THREE.Euler(
data.data.rotation.x, data.data.rotation.x,
data.data.rotation.y, data.data.rotation.y,
data.data.rotation.z data.data.rotation.z
), ),
}, },
})); }));
}); });
return () => { return () => {
socket.off("userConnectResponse"); socket.off("userConnectResponse");
socket.off("userDisConnectResponse"); socket.off("userDisConnectResponse");
socket.off("cameraUpdateResponse"); socket.off("cameraUpdateResponse");
}; };
}, [socket]); }, [socket]);
useFrame(() => { useFrame(() => {
if (!groupRef.current) return; if (!groupRef.current) return;
Object.keys(models).forEach((uuid) => { Object.keys(models).forEach((uuid) => {
const model = groupRef.current!.getObjectByProperty("uuid", uuid); const model = groupRef.current!.getObjectByProperty("uuid", uuid);
if (!model) return; if (!model) return;
const { targetPosition, targetRotation } = models[uuid]; const { targetPosition, targetRotation } = models[uuid];
model.position.lerp(targetPosition, 0.1); model.position.lerp(targetPosition, 0.1);
model.rotation.x = THREE.MathUtils.lerp(model.rotation.x, targetRotation.x, 0.1); model.rotation.x = THREE.MathUtils.lerp(
model.rotation.y = THREE.MathUtils.lerp(model.rotation.y, targetRotation.y, 0.1); model.rotation.x,
model.rotation.z = THREE.MathUtils.lerp(model.rotation.z, targetRotation.z, 0.1); targetRotation.x,
}); 0.1
}); );
model.rotation.y = THREE.MathUtils.lerp(
model.rotation.y,
targetRotation.y,
0.1
);
model.rotation.z = THREE.MathUtils.lerp(
model.rotation.z,
targetRotation.z,
0.1
);
});
});
useEffect(() => { useEffect(() => {
if (!groupRef.current) return; if (!groupRef.current) return;
const organization = email!.split("@")[1].split(".")[0]; const organization = email!.split("@")[1].split(".")[0];
getActiveUsersData(organization).then((data) => { getActiveUsersData(organization).then((data) => {
const filteredData = data.cameraDatas.filter( const filteredData = data.cameraDatas.filter(
(camera: any) => camera.userData.email !== email (camera: any) => camera.userData.email !== email
); );
if (filteredData.length > 0) { if (filteredData.length > 0) {
loader.load(camModel, (gltf) => { loader.load(camModel, (gltf) => {
const newCams = filteredData.map((cam: any) => { const newCams = filteredData.map((cam: any) => {
const newModel = gltf.scene.clone(); const newModel = gltf.scene.clone();
newModel.uuid = cam.userData._id; newModel.uuid = cam.userData._id;
newModel.position.set(cam.position.x, cam.position.y, cam.position.z); newModel.position.set(
newModel.rotation.set(cam.rotation.x, cam.rotation.y, cam.rotation.z); cam.position.x,
newModel.userData = cam.userData; cam.position.y,
return newModel; cam.position.z
}); );
newModel.rotation.set(
cam.rotation.x,
cam.rotation.y,
cam.rotation.z
);
newModel.userData = cam.userData;
return newModel;
});
const users = filteredData.map((cam: any) => cam.userData); const users = filteredData.map((cam: any) => cam.userData);
setActiveUsers((prev: any) => dedupeUsers([...prev, ...users])); setActiveUsers((prev: any) => dedupeUsers([...prev, ...users]));
setCams((prev) => dedupeCams([...prev, ...newCams])); setCams((prev) => dedupeCams([...prev, ...newCams]));
}); });
} }
}); });
}, []); }, []);
return ( return (
<group ref={groupRef} name="Cam-Model-Group"> <group
{cams.map((cam, index) => ( ref={groupRef}
<primitive key={cam.uuid} object={cam}> name="Cam-Model-Group"
<Html visible={activeModule !== "visualization" ? true : false}
as="div" >
center {cams.map((cam, index) => (
zIndexRange={[1, 0]} <primitive key={cam.uuid} object={cam}>
sprite <Html
style={{ as="div"
color: "white", center
textAlign: "center", zIndexRange={[1, 0]}
fontFamily: "Arial, sans-serif", sprite
}} style={{
position={[-0.015, 0, 0.7]} color: "white",
> textAlign: "center",
<CollabUserIcon fontFamily: "Arial, sans-serif",
userImage={cam.userData.userImage ||""} display: `${activeModule !== "visualization" ? "" : "none"}`,
userName={cam.userData.userName} }}
color={getAvatarColor(index, cam.userData.userName)} position={[-0.015, 0, 0.7]}
/> >
</Html> <CollabUserIcon
</primitive> userImage={cam.userData.userImage || ""}
))} userName={cam.userData.userName}
</group> color={getAvatarColor(index, cam.userData.userName)}
); />
</Html>
</primitive>
))}
</group>
);
}; };
export default CamModelsGroup; export default CamModelsGroup;