seperated zone corner reference as a seperate component

This commit is contained in:
2025-09-11 10:26:15 +05:30
parent 0a1c521ef0
commit 521aed3d1e
3 changed files with 82 additions and 36 deletions

View File

@@ -0,0 +1,80 @@
import { Vector3 } from "three";
import { RoundedBox } from "@react-three/drei";
function CornerReference({
point,
prevPoint,
nextPoint,
zone,
showTop = true,
showBottom = true,
cornerThickness = 0.25,
}: Readonly<{
point: Point;
prevPoint: Point;
nextPoint: Point;
zone: Zone;
showTop?: boolean;
showBottom?: boolean;
cornerThickness?: number;
}>) {
const baseCorner = new Vector3(point.position[0], (zone.points[0].layer - 1) * zone.zoneHeight, point.position[2]);
const halfHeight = zone.zoneHeight / 4;
const dirNext = new Vector3(nextPoint.position[0] - point.position[0], 0, nextPoint.position[2] - point.position[2]).normalize();
const dirPrev = new Vector3(prevPoint.position[0] - point.position[0], 0, prevPoint.position[2] - point.position[2]).normalize();
const bottom1: [number, number, number] = [baseCorner.x, baseCorner.y + halfHeight / 2, baseCorner.z];
const bottom2: [number, number, number] = [
baseCorner.clone().add(dirNext.clone().multiplyScalar(halfHeight / 2)).x,
baseCorner.clone().add(dirNext.clone().multiplyScalar(halfHeight / 2)).y + cornerThickness / 2,
baseCorner.clone().add(dirNext.clone().multiplyScalar(halfHeight / 2)).z,
];
const bottom3: [number, number, number] = [
baseCorner.clone().add(dirPrev.clone().multiplyScalar(halfHeight / 2)).x,
baseCorner.clone().add(dirPrev.clone().multiplyScalar(halfHeight / 2)).y + cornerThickness / 2,
baseCorner.clone().add(dirPrev.clone().multiplyScalar(halfHeight / 2)).z,
];
const top1: [number, number, number] = [bottom1[0], bottom1[1] + zone.zoneHeight - halfHeight + cornerThickness / 2, bottom1[2]];
const top2: [number, number, number] = [bottom2[0], bottom2[1] + zone.zoneHeight - cornerThickness / 2, bottom2[2]];
const top3: [number, number, number] = [bottom3[0], bottom3[1] + zone.zoneHeight - cornerThickness / 2, bottom3[2]];
return (
<>
{showBottom && (
<>
<RoundedBox radius={0.1} args={[cornerThickness, halfHeight, cornerThickness]} position={bottom1}>
<meshStandardMaterial color={zone.zoneColor} />
</RoundedBox>
<RoundedBox radius={0.1} args={[halfHeight, cornerThickness, cornerThickness]} position={bottom2} rotation={[0, -Math.atan2(dirNext.z, dirNext.x), 0]}>
<meshStandardMaterial color={zone.zoneColor} />
</RoundedBox>
<RoundedBox radius={0.1} args={[halfHeight, cornerThickness, cornerThickness]} position={bottom3} rotation={[0, -Math.atan2(dirPrev.z, dirPrev.x), 0]}>
<meshStandardMaterial color={zone.zoneColor} />
</RoundedBox>
</>
)}
{showTop && (
<>
<RoundedBox radius={0.1} args={[cornerThickness, halfHeight, cornerThickness]} position={top1}>
<meshStandardMaterial color={zone.zoneColor} />
</RoundedBox>
<RoundedBox radius={0.1} args={[halfHeight, cornerThickness, cornerThickness]} position={top2} rotation={[0, -Math.atan2(dirNext.z, dirNext.x), 0]}>
<meshStandardMaterial color={zone.zoneColor} />
</RoundedBox>
<RoundedBox radius={0.1} args={[halfHeight, cornerThickness, cornerThickness]} position={top3} rotation={[0, -Math.atan2(dirPrev.z, dirPrev.x), 0]}>
<meshStandardMaterial color={zone.zoneColor} />
</RoundedBox>
</>
)}
</>
);
}
export default CornerReference;

View File

@@ -6,7 +6,7 @@ import useShaderReader from "../../../../../utils/scene/useShaderReader";
import vertexShaderUrl from "../../../../../assets/shaders/zone/zone1.vert.glsl";
import fragmentShaderUrl from "../../../../../assets/shaders/zone/zone1.frag.glsl";
import { RoundedBox } from "@react-three/drei";
import CornerReference from "./cornerReference";
function ZoneInstance({ zone }: { readonly zone: Zone }) {
const vertexShader = useShaderReader(vertexShaderUrl);
@@ -14,7 +14,6 @@ function ZoneInstance({ zone }: { readonly zone: Zone }) {
const zoneLayer = zone.points[0].layer;
const { limitFps } = useSceneStore();
const [time, setTime] = useState<number>();
const isCornerReferenceVisible = false;
const zoneMaterial = useMemo(() => {
if (!vertexShader || !fragmentShader) return null;
@@ -54,25 +53,6 @@ function ZoneInstance({ zone }: { readonly zone: Zone }) {
const midpoint = new Vector3((point1.x + point2.x) / 2, zone.zoneHeight / 2 + (zoneLayer - 1) * zone.zoneHeight, (point1.z + point2.z) / 2);
const angle = Math.atan2(point2.z - point1.z, point2.x - point1.x);
const bottomCorner = new Vector3(point.position[0], (zoneLayer - 1) * zone.zoneHeight, point.position[2]);
const halfHeight = zone.zoneHeight / 4;
const dirNext = new Vector3(nextPoint.position[0] - point.position[0], 0, nextPoint.position[2] - point.position[2]).normalize();
const dirPrev = new Vector3(prevPoint.position[0] - point.position[0], 0, prevPoint.position[2] - point.position[2]).normalize();
const frameThickness = 0.25;
const position1: [number, number, number] = [bottomCorner.x, bottomCorner.y + halfHeight / 2, bottomCorner.z];
const position2: [number, number, number] = [
bottomCorner.clone().add(dirNext.clone().multiplyScalar(halfHeight / 2)).x,
bottomCorner.clone().add(dirNext.clone().multiplyScalar(halfHeight / 2)).y + frameThickness / 2,
bottomCorner.clone().add(dirNext.clone().multiplyScalar(halfHeight / 2)).z,
];
const position3: [number, number, number] = [
bottomCorner.clone().add(dirPrev.clone().multiplyScalar(halfHeight / 2)).x,
bottomCorner.clone().add(dirPrev.clone().multiplyScalar(halfHeight / 2)).y + frameThickness / 2,
bottomCorner.clone().add(dirPrev.clone().multiplyScalar(halfHeight / 2)).z,
];
return (
<group key={index}>
@@ -80,21 +60,8 @@ function ZoneInstance({ zone }: { readonly zone: Zone }) {
<planeGeometry args={[planeWidth, planeHeight]} />
<primitive object={zoneMaterial.clone()} attach="material" />
</mesh>
{isCornerReferenceVisible && (
<>
<RoundedBox radius={0.1} args={[frameThickness, halfHeight, frameThickness]} position={position1}>
<meshStandardMaterial depthWrite={true} color={zone.zoneColor} />
</RoundedBox>
<RoundedBox radius={0.1} args={[halfHeight, frameThickness, frameThickness]} position={position2} rotation={[0, -Math.atan2(dirNext.z, dirNext.x), 0]}>
<meshStandardMaterial depthWrite={true} color={zone.zoneColor} />
</RoundedBox>
<RoundedBox radius={0.1} args={[halfHeight, frameThickness, frameThickness]} position={position3} rotation={[0, -Math.atan2(dirPrev.z, dirPrev.x), 0]}>
<meshStandardMaterial depthWrite={true} color={zone.zoneColor} />
</RoundedBox>
</>
)}{" "}
<CornerReference showTop={false} showBottom={false} point={point} prevPoint={prevPoint} nextPoint={nextPoint} zone={zone} cornerThickness={0.25} />
</group>
);
})}

View File

@@ -109,7 +109,6 @@ function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) {
useEffect(() => {
if (isReset || !isPlaying) {
console.log('hii');
logStatus(armBot.modelUuid, "Simulation Play Reset Successfully");
setArmBotActive(armBot.modelUuid, false);
setArmBotState(armBot.modelUuid, "idle");