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

added function for find area

This commit is contained in:
Poovizhi99 2025-05-08 16:58:52 +05:30
parent 2e19637173
commit 19e5b9f311
3 changed files with 81 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/src/modules/builder/functions/computeAreaFrom3DPoints.ts Normal file
View File

@ -0,0 +1,17 @@
import { Vector2 } from "three";
export function computeAreaFrom3DPoints(points3D: any) {
// Project 3D points onto XZ plane
const projected = points3D.map((p: any) => new Vector2(p[0], p[2]));
// Shoelace formula for 2D polygon
let area = 0;
const n = projected.length;
for (let i = 0; i < n - 1; i++) {
const curr = projected[i];
const next = projected[i + 1];
area += curr.x * next.y - next.x * curr.y;
}
return Math.abs(area) / 2;
}

65
app/src/modules/builder/groups/zoneGroup.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect, useMemo, useRef } from "react";
import { Line, Sphere } from "@react-three/drei";
import { Html, Line, Sphere } from "@react-three/drei";
import { useThree, useFrame } from "@react-three/fiber";
import * as THREE from "three";
import {
@ -17,6 +17,8 @@ import {
import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi";
import * as CONSTANTS from "../../../types/world/worldConstants";
import * as turf from '@turf/turf';
import { computeAreaFrom3DPoints } from "../functions/computeAreaFrom3DPoints";
const ZoneGroup: React.FC = () => {
const { camera, pointer, gl, raycaster, scene, controls } = useThree();
@ -526,11 +528,12 @@ const ZoneGroup: React.FC = () => {
}
});
return (
<group ref={groupsRef} name="zoneGroup">
<group name="zones" visible={!toggleView}>
{zones.map((zone: any) => (
<group key={zone.zoneId} name={zone.zoneName} visible={false}>
{zones.map((zone: any, index: number) => (
<group key={`${zone.zoneId}-${index}`} name={zone.zoneName} visible={false}>
{zone.points
.slice(0, -1)
.map((point: [number, number, number], index: number) => {
@ -549,7 +552,7 @@ const ZoneGroup: React.FC = () => {
const midpoint = new THREE.Vector3(
(point1.x + point2.x) / 2,
CONSTANTS.zoneConfig.height / 2 +
(zone.layer - 1) * CONSTANTS.zoneConfig.height,
(zone.layer - 1) * CONSTANTS.zoneConfig.height,
(point1.z + point2.z) / 2
);
@ -592,7 +595,60 @@ const ZoneGroup: React.FC = () => {
}}
/>
))}
</group>
<group name="zoneArea">
{zones.map((zone: any, index: any) => {
const points3D = zone.points;
const coords2D = points3D.map((p: any) => [p[0], p[2]]);
if (
coords2D.length < 3 ||
coords2D[0][0] !== coords2D[coords2D.length - 1][0] ||
coords2D[0][1] !== coords2D[coords2D.length - 1][1]
) {
coords2D.push(coords2D[0]);
}
const polygon = turf.polygon([coords2D]);
const center2D = turf.center(polygon).geometry.coordinates;
const sumY = points3D.reduce((sum: number, p: any) => sum + p[1], 0);
const avgY = sumY / points3D.length;
const area = computeAreaFrom3DPoints(points3D);
const formattedArea = `${area.toFixed(2)} m²`;
const htmlPosition: [number, number, number] = [
center2D[0],
avgY + CONSTANTS.zoneConfig.height,
center2D[1]
];
return (
<Html
// data
key={`${index}-${zone}`}
position={htmlPosition}
// class
wrapperClass="distance-text-wrapper"
className="distance-text"
// other
zIndexRange={[1, 0]}
prepend
center
sprite
>
<div
className={`distance area line-${zone}`}
key={`${index}-${zone}`}
>
{zone.zoneName} ({formattedArea})
</div>
</Html>
);
})}
</group>
<group name="zonePoints" visible={toggleView}>
{zones
.filter((zone: any) => zone.layer === activeLayer)
@ -624,6 +680,7 @@ const ZoneGroup: React.FC = () => {
/>
)}
</group>
</group>
);
};

3
app/src/styles/scene/scene.scss
View File

@ -19,6 +19,9 @@
border-radius: #{$border-radius-medium};
box-shadow: var(--box-shadow-light);
}
.area{
background: #008cff;
}
}
.pointer-none {