seperated zone corner reference as a seperate component
This commit is contained in:
@@ -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;
|
||||
@@ -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>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -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");
|
||||
|
||||
Reference in New Issue
Block a user