1132 lines
40 KiB
TypeScript
1132 lines
40 KiB
TypeScript
"use client";
|
|
|
|
import { Canvas, useThree } from "@react-three/fiber";
|
|
import { OrbitControls, Grid, Box, Text } from "@react-three/drei";
|
|
import { Suspense, useRef, useState, useEffect, useMemo } from "react";
|
|
import * as THREE from "three";
|
|
|
|
interface YardPlacement {
|
|
id: number;
|
|
yard_layout_id?: number;
|
|
material_code?: string | null;
|
|
material_name?: string | null;
|
|
name?: string | null; // 객체 이름 (야드 이름 등)
|
|
quantity?: number | null;
|
|
unit?: string | null;
|
|
position_x: number;
|
|
position_y: number;
|
|
position_z: number;
|
|
size_x: number;
|
|
size_y: number;
|
|
size_z: number;
|
|
color: string;
|
|
data_source_type?: string | null;
|
|
data_source_config?: any;
|
|
data_binding?: any;
|
|
material_count?: number; // Location의 자재 개수
|
|
material_preview_height?: number; // 자재 스택 높이 (시각적)
|
|
}
|
|
|
|
interface Yard3DCanvasProps {
|
|
placements: YardPlacement[];
|
|
selectedPlacementId: number | null;
|
|
onPlacementClick: (placement: YardPlacement | null) => void;
|
|
onPlacementDrag?: (id: number, position: { x: number; y: number; z: number }) => void;
|
|
gridSize?: number; // 그리드 크기 (기본값: 5)
|
|
onCollisionDetected?: () => void; // 충돌 감지 시 콜백
|
|
focusOnPlacementId?: number | null; // 카메라가 포커스할 요소 ID
|
|
}
|
|
|
|
// 좌표를 그리드 칸의 중심에 스냅 (마인크래프트 스타일)
|
|
// Three.js Box의 position은 중심점이므로, 그리드 칸의 중심에 배치해야 칸에 딱 맞음
|
|
function snapToGrid(value: number, gridSize: number): number {
|
|
// 가장 가까운 그리드 교차점으로 스냅 (오프셋 없음)
|
|
// DigitalTwinEditor에서 오프셋 처리하므로 여기서는 순수 스냅만
|
|
return Math.round(value / gridSize) * gridSize;
|
|
}
|
|
|
|
// 자재 박스 컴포넌트 (드래그 가능)
|
|
function MaterialBox({
|
|
placement,
|
|
isSelected,
|
|
onClick,
|
|
onDrag,
|
|
onDragStart,
|
|
onDragEnd,
|
|
gridSize = 5,
|
|
allPlacements = [],
|
|
}: {
|
|
placement: YardPlacement;
|
|
isSelected: boolean;
|
|
onClick: () => void;
|
|
onDrag?: (position: { x: number; y: number; z: number }) => void;
|
|
onDragStart?: () => void;
|
|
onDragEnd?: () => void;
|
|
gridSize?: number;
|
|
allPlacements?: YardPlacement[];
|
|
onCollisionDetected?: () => void;
|
|
}) {
|
|
const meshRef = useRef<THREE.Mesh>(null);
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
const dragStartPos = useRef<{ x: number; y: number; z: number }>({ x: 0, y: 0, z: 0 });
|
|
const mouseStartPos = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
|
|
const dragOffset = useRef<{ x: number; z: number }>({ x: 0, z: 0 }); // 마우스와 객체 중심 간 오프셋
|
|
const { camera, gl } = useThree();
|
|
const [glowIntensity, setGlowIntensity] = useState(1);
|
|
|
|
// 선택 시 빛나는 애니메이션
|
|
useEffect(() => {
|
|
if (!isSelected) {
|
|
setGlowIntensity(1);
|
|
return;
|
|
}
|
|
|
|
let animationId: number;
|
|
const startTime = Date.now();
|
|
|
|
const animate = () => {
|
|
const elapsed = Date.now() - startTime;
|
|
const intensity = 1 + Math.sin(elapsed * 0.003) * 0.5; // 0.5 ~ 1.5 사이 진동
|
|
setGlowIntensity(intensity);
|
|
animationId = requestAnimationFrame(animate);
|
|
};
|
|
|
|
animate();
|
|
|
|
return () => {
|
|
if (animationId) {
|
|
cancelAnimationFrame(animationId);
|
|
}
|
|
};
|
|
}, [isSelected]);
|
|
|
|
// 특정 좌표에 요소를 배치할 수 있는지 확인하고, 필요하면 Y 위치를 조정
|
|
const checkCollisionAndAdjustY = (x: number, y: number, z: number): { hasCollision: boolean; adjustedY: number } => {
|
|
if (!allPlacements || allPlacements.length === 0) {
|
|
// 다른 객체가 없으면 기본 높이
|
|
const objectType = placement.data_source_type as string | null;
|
|
const defaultY = objectType === "area" ? 0.05 : (placement.size_y || gridSize) / 2;
|
|
return {
|
|
hasCollision: false,
|
|
adjustedY: defaultY,
|
|
};
|
|
}
|
|
|
|
// 내 크기 정보
|
|
const mySizeX = placement.size_x || gridSize;
|
|
const mySizeZ = placement.size_z || gridSize;
|
|
const mySizeY = placement.size_y || gridSize;
|
|
|
|
// 내 바운딩 박스 (좌측 하단 모서리 기준)
|
|
const myMinX = x - mySizeX / 2;
|
|
const myMaxX = x + mySizeX / 2;
|
|
const myMinZ = z - mySizeZ / 2;
|
|
const myMaxZ = z + mySizeZ / 2;
|
|
|
|
const objectType = placement.data_source_type as string | null;
|
|
const defaultY = objectType === "area" ? 0.05 : mySizeY / 2;
|
|
let maxYBelow = defaultY;
|
|
|
|
// Area는 스택되지 않음 (항상 바닥에 배치)
|
|
if (objectType === "area") {
|
|
return {
|
|
hasCollision: false,
|
|
adjustedY: defaultY,
|
|
};
|
|
}
|
|
|
|
for (const p of allPlacements) {
|
|
// 자기 자신은 제외
|
|
if (Number(p.id) === Number(placement.id)) {
|
|
continue;
|
|
}
|
|
|
|
// 상대방 크기 정보
|
|
const pSizeX = p.size_x || gridSize;
|
|
const pSizeZ = p.size_z || gridSize;
|
|
const pSizeY = p.size_y || gridSize;
|
|
|
|
// 상대방 바운딩 박스
|
|
const pMinX = p.position_x - pSizeX / 2;
|
|
const pMaxX = p.position_x + pSizeX / 2;
|
|
const pMinZ = p.position_z - pSizeZ / 2;
|
|
const pMaxZ = p.position_z + pSizeZ / 2;
|
|
|
|
// AABB 충돌 감지 (2D 평면에서)
|
|
const isOverlapping = myMinX < pMaxX && myMaxX > pMinX && myMinZ < pMaxZ && myMaxZ > pMinZ;
|
|
|
|
if (isOverlapping) {
|
|
// 겹침: 상대방 위에 배치
|
|
const topOfOtherElement = p.position_y + pSizeY / 2;
|
|
const myYOnTop = topOfOtherElement + mySizeY / 2;
|
|
|
|
if (myYOnTop > maxYBelow) {
|
|
maxYBelow = myYOnTop;
|
|
}
|
|
}
|
|
}
|
|
|
|
const needsAdjustment = Math.abs(y - maxYBelow) > 0.1;
|
|
|
|
return {
|
|
hasCollision: needsAdjustment,
|
|
adjustedY: maxYBelow,
|
|
};
|
|
};
|
|
|
|
// 드래그 중이 아닐 때만 위치 동기화
|
|
useEffect(() => {
|
|
if (!isDragging && meshRef.current) {
|
|
const currentPos = meshRef.current.position;
|
|
const targetX = placement.position_x;
|
|
const targetY = placement.position_y;
|
|
const targetZ = placement.position_z;
|
|
|
|
// 현재 위치와 목표 위치가 다를 때만 업데이트 (0.01 이상 차이)
|
|
const threshold = 0.01;
|
|
const needsUpdate =
|
|
Math.abs(currentPos.x - targetX) > threshold ||
|
|
Math.abs(currentPos.y - targetY) > threshold ||
|
|
Math.abs(currentPos.z - targetZ) > threshold;
|
|
|
|
if (needsUpdate) {
|
|
meshRef.current.position.set(targetX, targetY, targetZ);
|
|
}
|
|
}
|
|
}, [placement.position_x, placement.position_y, placement.position_z, isDragging]);
|
|
|
|
// 전역 이벤트 리스너 등록
|
|
useEffect(() => {
|
|
const handleGlobalMouseMove = (e: MouseEvent) => {
|
|
if (isDragging && onDrag && meshRef.current) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
// 마우스 좌표를 정규화 (-1 ~ 1)
|
|
const rect = gl.domElement.getBoundingClientRect();
|
|
const mouseX = ((e.clientX - rect.left) / rect.width) * 2 - 1;
|
|
const mouseY = -((e.clientY - rect.top) / rect.height) * 2 + 1;
|
|
|
|
// Raycaster로 바닥 평면과의 교차점 계산
|
|
const raycaster = new THREE.Raycaster();
|
|
raycaster.setFromCamera(new THREE.Vector2(mouseX, mouseY), camera);
|
|
|
|
// 바닥 평면 (y = 0)
|
|
const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
|
|
const intersectPoint = new THREE.Vector3();
|
|
const hasIntersection = raycaster.ray.intersectPlane(plane, intersectPoint);
|
|
|
|
if (!hasIntersection) {
|
|
return;
|
|
}
|
|
|
|
// 마우스 위치에 드래그 시작 시 저장한 오프셋 적용
|
|
const finalX = intersectPoint.x + dragOffset.current.x;
|
|
const finalZ = intersectPoint.z + dragOffset.current.z;
|
|
|
|
// NaN 검증
|
|
if (isNaN(finalX) || isNaN(finalZ)) {
|
|
return;
|
|
}
|
|
|
|
// 객체의 좌측 하단 모서리 좌표 계산 (크기 / 2를 빼서)
|
|
const sizeX = placement.size_x || 5;
|
|
const sizeZ = placement.size_z || 5;
|
|
|
|
const cornerX = finalX - sizeX / 2;
|
|
const cornerZ = finalZ - sizeZ / 2;
|
|
|
|
// 좌측 하단 모서리를 그리드에 스냅
|
|
const snappedCornerX = snapToGrid(cornerX, gridSize);
|
|
const snappedCornerZ = snapToGrid(cornerZ, gridSize);
|
|
|
|
// 스냅된 모서리로부터 중심 위치 계산
|
|
const finalSnappedX = snappedCornerX + sizeX / 2;
|
|
const finalSnappedZ = snappedCornerZ + sizeZ / 2;
|
|
|
|
console.log("🐛 드래그 중:", {
|
|
마우스_화면: { x: e.clientX, y: e.clientY },
|
|
정규화_마우스: { x: mouseX, y: mouseY },
|
|
교차점: { x: finalX, z: finalZ },
|
|
스냅후: { x: finalSnappedX, z: finalSnappedZ },
|
|
});
|
|
|
|
// 충돌 체크 및 Y 위치 조정
|
|
const { adjustedY } = checkCollisionAndAdjustY(finalSnappedX, dragStartPos.current.y, finalSnappedZ);
|
|
|
|
// 즉시 mesh 위치 업데이트 (스냅된 위치로)
|
|
meshRef.current.position.set(finalSnappedX, adjustedY, finalSnappedZ);
|
|
|
|
// ⚠️ 드래그 중에는 상태 업데이트 안 함 (미리보기만)
|
|
// 실제 저장은 handleGlobalMouseUp에서만 수행
|
|
}
|
|
};
|
|
|
|
const handleGlobalMouseUp = () => {
|
|
if (isDragging && meshRef.current) {
|
|
const currentPos = meshRef.current.position;
|
|
|
|
// 실제로 이동했는지 확인 (최소 이동 거리: 0.1)
|
|
const minMovement = 0.1;
|
|
const deltaX = Math.abs(currentPos.x - dragStartPos.current.x);
|
|
const deltaZ = Math.abs(currentPos.z - dragStartPos.current.z);
|
|
const hasMoved = deltaX > minMovement || deltaZ > minMovement;
|
|
|
|
if (hasMoved) {
|
|
// 실제로 드래그한 경우: 이미 handleGlobalMouseMove에서 스냅됨
|
|
// currentPos는 이미 스냅+오프셋이 적용된 값이므로 그대로 사용
|
|
const finalX = currentPos.x;
|
|
const finalY = currentPos.y;
|
|
const finalZ = currentPos.z;
|
|
|
|
// ✅ 항상 배치 가능 (위로 올라가므로)
|
|
console.log("✅ 배치 완료! 저장:", { x: finalX, y: finalY, z: finalZ });
|
|
|
|
// 최종 위치 저장
|
|
if (onDrag) {
|
|
onDrag({
|
|
x: finalX,
|
|
y: finalY,
|
|
z: finalZ,
|
|
});
|
|
}
|
|
} else {
|
|
// 클릭만 한 경우: 원래 위치 유지 (아무것도 안 함)
|
|
meshRef.current.position.set(dragStartPos.current.x, dragStartPos.current.y, dragStartPos.current.z);
|
|
}
|
|
|
|
setIsDragging(false);
|
|
gl.domElement.style.cursor = isSelected ? "grab" : "pointer";
|
|
if (onDragEnd) {
|
|
onDragEnd();
|
|
}
|
|
}
|
|
};
|
|
|
|
if (isDragging) {
|
|
window.addEventListener("mousemove", handleGlobalMouseMove);
|
|
window.addEventListener("mouseup", handleGlobalMouseUp);
|
|
|
|
return () => {
|
|
window.removeEventListener("mousemove", handleGlobalMouseMove);
|
|
window.removeEventListener("mouseup", handleGlobalMouseUp);
|
|
};
|
|
}
|
|
}, [isDragging, onDrag, onDragEnd, camera, isSelected, gl.domElement]);
|
|
|
|
const handlePointerDown = (e: any) => {
|
|
e.stopPropagation();
|
|
|
|
// 뷰어 모드(onDrag 없음)에서는 클릭만 처리
|
|
if (!onDrag) {
|
|
return;
|
|
}
|
|
|
|
// 편집 모드에서 선택되었고 드래그 가능한 경우
|
|
if (isSelected && meshRef.current) {
|
|
// 드래그 시작 시점의 mesh 실제 위치 저장 (현재 렌더링된 위치)
|
|
const currentPos = meshRef.current.position;
|
|
dragStartPos.current = {
|
|
x: currentPos.x,
|
|
y: currentPos.y,
|
|
z: currentPos.z,
|
|
};
|
|
|
|
// 마우스 시작 위치 저장
|
|
mouseStartPos.current = {
|
|
x: e.clientX,
|
|
y: e.clientY,
|
|
};
|
|
|
|
// 마우스 클릭 위치를 3D 좌표로 변환
|
|
const rect = gl.domElement.getBoundingClientRect();
|
|
const mouseX = ((e.clientX - rect.left) / rect.width) * 2 - 1;
|
|
const mouseY = -((e.clientY - rect.top) / rect.height) * 2 + 1;
|
|
|
|
const raycaster = new THREE.Raycaster();
|
|
raycaster.setFromCamera(new THREE.Vector2(mouseX, mouseY), camera);
|
|
|
|
// 바닥 평면과의 교차점 계산
|
|
const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
|
|
const intersectPoint = new THREE.Vector3();
|
|
const hasIntersection = raycaster.ray.intersectPlane(plane, intersectPoint);
|
|
|
|
if (hasIntersection) {
|
|
// 마우스 클릭 위치와 객체 중심 간의 오프셋 저장
|
|
dragOffset.current = {
|
|
x: currentPos.x - intersectPoint.x,
|
|
z: currentPos.z - intersectPoint.z,
|
|
};
|
|
} else {
|
|
dragOffset.current = { x: 0, z: 0 };
|
|
}
|
|
|
|
setIsDragging(true);
|
|
gl.domElement.style.cursor = "grabbing";
|
|
if (onDragStart) {
|
|
onDragStart();
|
|
}
|
|
}
|
|
};
|
|
|
|
// 요소가 설정되었는지 확인
|
|
const isConfigured = !!(placement.material_name && placement.quantity && placement.unit);
|
|
|
|
const boxHeight = placement.size_y || gridSize;
|
|
const boxWidth = placement.size_x || gridSize;
|
|
const boxDepth = placement.size_z || gridSize;
|
|
const palletHeight = 0.3; // 팔레트 높이
|
|
const palletGap = 0.05; // 팔레트와 박스 사이 간격 (매우 작게)
|
|
|
|
// 팔레트 위치 계산: 박스 하단부터 시작
|
|
const palletYOffset = -(boxHeight / 2) - palletHeight / 2 - palletGap;
|
|
|
|
// 객체 타입 (data_source_type에 저장됨)
|
|
const objectType = placement.data_source_type as string | null;
|
|
|
|
// 타입별 렌더링
|
|
const renderObjectByType = () => {
|
|
switch (objectType) {
|
|
case "area":
|
|
// Area: 투명한 바닥 + 두꺼운 외곽선 (mesh) + 이름 텍스트
|
|
const borderThickness = 0.3; // 외곽선 두께
|
|
return (
|
|
<>
|
|
{/* 투명한 메쉬 (클릭 영역) */}
|
|
<mesh>
|
|
<boxGeometry args={[boxWidth, 0.1, boxDepth]} />
|
|
<meshBasicMaterial transparent opacity={0} />
|
|
</mesh>
|
|
|
|
{/* 두꺼운 외곽선 - 4개의 막대로 구현 */}
|
|
{/* 상단 */}
|
|
<mesh position={[0, 0.05, -boxDepth / 2]}>
|
|
<boxGeometry args={[boxWidth + borderThickness, 0.2, borderThickness]} />
|
|
<meshBasicMaterial color={isSelected ? "#ffffff" : placement.color} transparent opacity={0.9} />
|
|
</mesh>
|
|
{/* 하단 */}
|
|
<mesh position={[0, 0.05, boxDepth / 2]}>
|
|
<boxGeometry args={[boxWidth + borderThickness, 0.2, borderThickness]} />
|
|
<meshBasicMaterial color={isSelected ? "#ffffff" : placement.color} transparent opacity={0.9} />
|
|
</mesh>
|
|
{/* 좌측 */}
|
|
<mesh position={[-boxWidth / 2, 0.05, 0]}>
|
|
<boxGeometry args={[borderThickness, 0.2, boxDepth - borderThickness]} />
|
|
<meshBasicMaterial color={isSelected ? "#ffffff" : placement.color} transparent opacity={0.9} />
|
|
</mesh>
|
|
{/* 우측 */}
|
|
<mesh position={[boxWidth / 2, 0.05, 0]}>
|
|
<boxGeometry args={[borderThickness, 0.2, boxDepth - borderThickness]} />
|
|
<meshBasicMaterial color={isSelected ? "#ffffff" : placement.color} transparent opacity={0.9} />
|
|
</mesh>
|
|
|
|
{/* 선택 시 빛나는 효과 */}
|
|
{isSelected && (
|
|
<>
|
|
<mesh position={[0, 0.08, -boxDepth / 2]}>
|
|
<boxGeometry args={[boxWidth + borderThickness * 2, 0.25, borderThickness * 1.5]} />
|
|
<meshBasicMaterial color={placement.color} transparent opacity={0.5} />
|
|
</mesh>
|
|
<mesh position={[0, 0.08, boxDepth / 2]}>
|
|
<boxGeometry args={[boxWidth + borderThickness * 2, 0.25, borderThickness * 1.5]} />
|
|
<meshBasicMaterial color={placement.color} transparent opacity={0.5} />
|
|
</mesh>
|
|
<mesh position={[-boxWidth / 2, 0.08, 0]}>
|
|
<boxGeometry args={[borderThickness * 1.5, 0.25, boxDepth]} />
|
|
<meshBasicMaterial color={placement.color} transparent opacity={0.5} />
|
|
</mesh>
|
|
<mesh position={[boxWidth / 2, 0.08, 0]}>
|
|
<boxGeometry args={[borderThickness * 1.5, 0.25, boxDepth]} />
|
|
<meshBasicMaterial color={placement.color} transparent opacity={0.5} />
|
|
</mesh>
|
|
</>
|
|
)}
|
|
|
|
{/* Area 이름 텍스트 */}
|
|
{placement.name && (
|
|
<Text
|
|
position={[0, 0.15, 0]}
|
|
rotation={[-Math.PI / 2, 0, 0]}
|
|
fontSize={Math.min(boxWidth, boxDepth) * 0.2}
|
|
color={placement.color}
|
|
anchorX="center"
|
|
anchorY="middle"
|
|
outlineWidth={0.05}
|
|
outlineColor="#000000"
|
|
>
|
|
{placement.name}
|
|
</Text>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
case "location-bed":
|
|
case "location-temp":
|
|
case "location-dest":
|
|
// 베드 타입 Location: 초록색 상자
|
|
return (
|
|
<>
|
|
<Box args={[boxWidth, boxHeight, boxDepth]}>
|
|
<meshStandardMaterial
|
|
color={placement.color}
|
|
roughness={0.5}
|
|
metalness={0.3}
|
|
emissive={isSelected ? placement.color : "#000000"}
|
|
emissiveIntensity={isSelected ? glowIntensity * 0.8 : 0}
|
|
/>
|
|
</Box>
|
|
|
|
{/* 대표 자재 스택 (자재가 있을 때만) */}
|
|
{placement.material_count !== undefined &&
|
|
placement.material_count > 0 &&
|
|
placement.material_preview_height && (
|
|
<Box
|
|
args={[boxWidth * 0.7, placement.material_preview_height, boxDepth * 0.7]}
|
|
position={[0, boxHeight / 2 + placement.material_preview_height / 2, 0]}
|
|
>
|
|
<meshStandardMaterial
|
|
color="#ef4444"
|
|
roughness={0.6}
|
|
metalness={0.2}
|
|
emissive={isSelected ? "#ef4444" : "#000000"}
|
|
emissiveIntensity={isSelected ? glowIntensity * 0.3 : 0}
|
|
transparent
|
|
opacity={0.7}
|
|
/>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Location 이름 */}
|
|
{placement.name && (
|
|
<Text
|
|
position={[0, boxHeight / 2 + 0.3, 0]}
|
|
rotation={[-Math.PI / 2, 0, 0]}
|
|
fontSize={Math.min(boxWidth, boxDepth) * 0.15}
|
|
color="#ffffff"
|
|
anchorX="center"
|
|
anchorY="middle"
|
|
outlineWidth={0.03}
|
|
outlineColor="#000000"
|
|
>
|
|
{placement.name}
|
|
</Text>
|
|
)}
|
|
|
|
{/* 자재 개수 */}
|
|
{placement.material_count !== undefined && placement.material_count > 0 && (
|
|
<Text
|
|
position={[0, boxHeight / 2 + 0.6, 0]}
|
|
rotation={[-Math.PI / 2, 0, 0]}
|
|
fontSize={Math.min(boxWidth, boxDepth) * 0.12}
|
|
color="#fbbf24"
|
|
anchorX="center"
|
|
anchorY="middle"
|
|
outlineWidth={0.03}
|
|
outlineColor="#000000"
|
|
>
|
|
{`자재: ${placement.material_count}개`}
|
|
</Text>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
case "location-stp":
|
|
// 정차포인트(STP): 주황색 낮은 플랫폼
|
|
return (
|
|
<>
|
|
<Box args={[boxWidth, boxHeight, boxDepth]}>
|
|
<meshStandardMaterial
|
|
color={placement.color}
|
|
roughness={0.6}
|
|
metalness={0.2}
|
|
emissive={isSelected ? placement.color : "#000000"}
|
|
emissiveIntensity={isSelected ? glowIntensity * 0.8 : 0}
|
|
/>
|
|
</Box>
|
|
|
|
{/* Location 이름 */}
|
|
{placement.name && (
|
|
<Text
|
|
position={[0, boxHeight / 2 + 0.3, 0]}
|
|
rotation={[-Math.PI / 2, 0, 0]}
|
|
fontSize={Math.min(boxWidth, boxDepth) * 0.15}
|
|
color="#ffffff"
|
|
anchorX="center"
|
|
anchorY="middle"
|
|
outlineWidth={0.03}
|
|
outlineColor="#000000"
|
|
>
|
|
{placement.name}
|
|
</Text>
|
|
)}
|
|
|
|
{/* 자재 개수 (STP는 정차포인트라 자재가 없을 수 있음) */}
|
|
{placement.material_count !== undefined && placement.material_count > 0 && (
|
|
<Text
|
|
position={[0, boxHeight / 2 + 0.6, 0]}
|
|
rotation={[-Math.PI / 2, 0, 0]}
|
|
fontSize={Math.min(boxWidth, boxDepth) * 0.12}
|
|
color="#fbbf24"
|
|
anchorX="center"
|
|
anchorY="middle"
|
|
outlineWidth={0.03}
|
|
outlineColor="#000000"
|
|
>
|
|
{`자재: ${placement.material_count}개`}
|
|
</Text>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
// case "gantry-crane":
|
|
// // 겐트리 크레인: 기둥 2개 + 상단 빔
|
|
// return (
|
|
// <group>
|
|
// {/* 왼쪽 기둥 */}
|
|
// <Box args={[boxWidth * 0.1, boxHeight, boxDepth * 0.1]} position={[-boxWidth * 0.4, 0, 0]}>
|
|
// <meshStandardMaterial
|
|
// color={placement.color}
|
|
// roughness={0.3}
|
|
// metalness={0.7}
|
|
// emissive={isSelected ? placement.color : "#000000"}
|
|
// emissiveIntensity={isSelected ? glowIntensity : 0}
|
|
// />
|
|
// </Box>
|
|
// {/* 오른쪽 기둥 */}
|
|
// <Box args={[boxWidth * 0.1, boxHeight, boxDepth * 0.1]} position={[boxWidth * 0.4, 0, 0]}>
|
|
// <meshStandardMaterial
|
|
// color={placement.color}
|
|
// roughness={0.3}
|
|
// metalness={0.7}
|
|
// emissive={isSelected ? placement.color : "#000000"}
|
|
// emissiveIntensity={isSelected ? glowIntensity : 0}
|
|
// />
|
|
// </Box>
|
|
// {/* 상단 빔 */}
|
|
// <Box args={[boxWidth, boxHeight * 0.15, boxDepth * 0.15]} position={[0, boxHeight * 0.42, 0]}>
|
|
// <meshStandardMaterial
|
|
// color={placement.color}
|
|
// roughness={0.3}
|
|
// metalness={0.7}
|
|
// emissive={isSelected ? placement.color : "#000000"}
|
|
// emissiveIntensity={isSelected ? glowIntensity : 0}
|
|
// />
|
|
// </Box>
|
|
// {/* 호이스트 (크레인 훅) */}
|
|
// <Box args={[boxWidth * 0.08, boxHeight * 0.3, boxDepth * 0.08]} position={[0, boxHeight * 0.1, 0]}>
|
|
// <meshStandardMaterial
|
|
// color="#fbbf24"
|
|
// roughness={0.4}
|
|
// metalness={0.6}
|
|
// emissive={isSelected ? "#fbbf24" : "#000000"}
|
|
// emissiveIntensity={isSelected ? glowIntensity * 0.6 : 0}
|
|
// />
|
|
// </Box>
|
|
// </group>
|
|
// );
|
|
|
|
case "crane-mobile":
|
|
// 이동식 크레인: 하부(트랙) + 회전대 + 캐빈 + 붐대 + 카운터웨이트 + 후크
|
|
return (
|
|
<group>
|
|
{/* 하부 - 크롤러 트랙 (좌측) */}
|
|
<Box
|
|
args={[boxWidth * 0.3, boxHeight * 0.15, boxDepth * 0.95]}
|
|
position={[-boxWidth * 0.3, -boxHeight * 0.42, 0]}
|
|
>
|
|
<meshStandardMaterial
|
|
color="#1f2937"
|
|
roughness={0.8}
|
|
metalness={0.3}
|
|
emissive={isSelected ? "#1f2937" : "#000000"}
|
|
emissiveIntensity={isSelected ? glowIntensity * 0.3 : 0}
|
|
/>
|
|
</Box>
|
|
{/* 하부 - 크롤러 트랙 (우측) */}
|
|
<Box
|
|
args={[boxWidth * 0.3, boxHeight * 0.15, boxDepth * 0.95]}
|
|
position={[boxWidth * 0.3, -boxHeight * 0.42, 0]}
|
|
>
|
|
<meshStandardMaterial
|
|
color="#1f2937"
|
|
roughness={0.8}
|
|
metalness={0.3}
|
|
emissive={isSelected ? "#1f2937" : "#000000"}
|
|
emissiveIntensity={isSelected ? glowIntensity * 0.3 : 0}
|
|
/>
|
|
</Box>
|
|
|
|
{/* 회전 플랫폼 */}
|
|
<Box args={[boxWidth * 0.85, boxHeight * 0.12, boxDepth * 0.85]} position={[0, -boxHeight * 0.3, 0]}>
|
|
<meshStandardMaterial
|
|
color={placement.color}
|
|
roughness={0.3}
|
|
metalness={0.7}
|
|
emissive={isSelected ? placement.color : "#000000"}
|
|
emissiveIntensity={isSelected ? glowIntensity : 0}
|
|
/>
|
|
</Box>
|
|
|
|
{/* 엔진룸 (뒤쪽) */}
|
|
<Box
|
|
args={[boxWidth * 0.6, boxHeight * 0.25, boxDepth * 0.3]}
|
|
position={[0, -boxHeight * 0.15, boxDepth * 0.25]}
|
|
>
|
|
<meshStandardMaterial
|
|
color={placement.color}
|
|
roughness={0.4}
|
|
metalness={0.6}
|
|
emissive={isSelected ? placement.color : "#000000"}
|
|
emissiveIntensity={isSelected ? glowIntensity * 0.8 : 0}
|
|
/>
|
|
</Box>
|
|
|
|
{/* 캐빈 (운전실) - 앞쪽 */}
|
|
<Box
|
|
args={[boxWidth * 0.35, boxHeight * 0.3, boxDepth * 0.35]}
|
|
position={[0, -boxHeight * 0.1, -boxDepth * 0.2]}
|
|
>
|
|
<meshStandardMaterial
|
|
color="#374151"
|
|
roughness={0.2}
|
|
metalness={0.8}
|
|
emissive={isSelected ? "#60a5fa" : "#000000"}
|
|
emissiveIntensity={isSelected ? glowIntensity * 0.5 : 0}
|
|
/>
|
|
</Box>
|
|
|
|
{/* 붐대 베이스 (회전 지점) */}
|
|
<Box args={[boxWidth * 0.2, boxHeight * 0.2, boxDepth * 0.2]} position={[0, -boxHeight * 0.05, 0]}>
|
|
<meshStandardMaterial
|
|
color="#4b5563"
|
|
roughness={0.3}
|
|
metalness={0.8}
|
|
emissive={isSelected ? "#4b5563" : "#000000"}
|
|
emissiveIntensity={isSelected ? glowIntensity * 0.4 : 0}
|
|
/>
|
|
</Box>
|
|
|
|
{/* 메인 붐대 (하단 섹션) */}
|
|
<Box
|
|
args={[boxWidth * 0.15, boxHeight * 0.5, boxDepth * 0.15]}
|
|
position={[0, boxHeight * 0.1, -boxDepth * 0.15]}
|
|
rotation={[Math.PI / 4.5, 0, 0]}
|
|
>
|
|
<meshStandardMaterial
|
|
color="#fbbf24"
|
|
roughness={0.3}
|
|
metalness={0.7}
|
|
emissive={isSelected ? "#fbbf24" : "#000000"}
|
|
emissiveIntensity={isSelected ? glowIntensity * 0.7 : 0}
|
|
/>
|
|
</Box>
|
|
|
|
{/* 메인 붐대 (상단 섹션 - 연장) */}
|
|
<Box
|
|
args={[boxWidth * 0.12, boxHeight * 0.4, boxDepth * 0.12]}
|
|
position={[0, boxHeight * 0.3, -boxDepth * 0.35]}
|
|
rotation={[Math.PI / 5, 0, 0]}
|
|
>
|
|
<meshStandardMaterial
|
|
color="#fbbf24"
|
|
roughness={0.3}
|
|
metalness={0.7}
|
|
emissive={isSelected ? "#fbbf24" : "#000000"}
|
|
emissiveIntensity={isSelected ? glowIntensity * 0.7 : 0}
|
|
/>
|
|
</Box>
|
|
|
|
{/* 카운터웨이트 (뒤쪽 균형추) */}
|
|
<Box
|
|
args={[boxWidth * 0.5, boxHeight * 0.2, boxDepth * 0.25]}
|
|
position={[0, -boxHeight * 0.05, boxDepth * 0.3]}
|
|
>
|
|
<meshStandardMaterial
|
|
color="#6b7280"
|
|
roughness={0.6}
|
|
metalness={0.4}
|
|
emissive={isSelected ? "#6b7280" : "#000000"}
|
|
emissiveIntensity={isSelected ? glowIntensity * 0.3 : 0}
|
|
/>
|
|
</Box>
|
|
|
|
{/* 후크 케이블 */}
|
|
<Box
|
|
args={[boxWidth * 0.02, boxHeight * 0.3, boxDepth * 0.02]}
|
|
position={[0, boxHeight * 0.15, -boxDepth * 0.4]}
|
|
>
|
|
<meshStandardMaterial color="#1f2937" roughness={0.4} metalness={0.6} />
|
|
</Box>
|
|
|
|
{/* 후크 */}
|
|
<Box args={[boxWidth * 0.08, boxHeight * 0.08, boxDepth * 0.08]} position={[0, 0, -boxDepth * 0.4]}>
|
|
<meshStandardMaterial
|
|
color="#ef4444"
|
|
roughness={0.3}
|
|
metalness={0.8}
|
|
emissive={isSelected ? "#ef4444" : "#000000"}
|
|
emissiveIntensity={isSelected ? glowIntensity * 0.8 : 0}
|
|
/>
|
|
</Box>
|
|
|
|
{/* 지브 와이어 (지지 케이블) */}
|
|
<Box
|
|
args={[boxWidth * 0.015, boxHeight * 0.35, boxDepth * 0.015]}
|
|
position={[0, boxHeight * 0.25, -boxDepth * 0.05]}
|
|
rotation={[Math.PI / 6, 0, 0]}
|
|
>
|
|
<meshStandardMaterial color="#1f2937" roughness={0.3} metalness={0.7} />
|
|
</Box>
|
|
</group>
|
|
);
|
|
|
|
case "rack":
|
|
// 랙: 프레임 구조
|
|
return (
|
|
<group>
|
|
{/* 4개 기둥 */}
|
|
{[
|
|
[-boxWidth * 0.4, -boxDepth * 0.4],
|
|
[boxWidth * 0.4, -boxDepth * 0.4],
|
|
[-boxWidth * 0.4, boxDepth * 0.4],
|
|
[boxWidth * 0.4, boxDepth * 0.4],
|
|
].map(([x, z], idx) => (
|
|
<Box key={`pillar-${idx}`} args={[boxWidth * 0.08, boxHeight, boxDepth * 0.08]} position={[x, 0, z]}>
|
|
<meshStandardMaterial
|
|
color={placement.color}
|
|
roughness={0.3}
|
|
metalness={0.7}
|
|
emissive={isSelected ? placement.color : "#000000"}
|
|
emissiveIntensity={isSelected ? 0.5 : 0}
|
|
/>
|
|
</Box>
|
|
))}
|
|
{/* 선반 (3단) */}
|
|
{[-boxHeight * 0.3, 0, boxHeight * 0.3].map((y, idx) => (
|
|
<Box key={`shelf-${idx}`} args={[boxWidth * 0.9, boxHeight * 0.05, boxDepth * 0.9]} position={[0, y, 0]}>
|
|
<meshStandardMaterial
|
|
color="#6b7280"
|
|
roughness={0.5}
|
|
metalness={0.5}
|
|
emissive={isSelected ? "#6b7280" : "#000000"}
|
|
emissiveIntensity={isSelected ? glowIntensity * 0.6 : 0}
|
|
/>
|
|
</Box>
|
|
))}
|
|
</group>
|
|
);
|
|
|
|
case "plate-stack":
|
|
default:
|
|
// 후판 스택: 팔레트 + 박스 (기존 렌더링)
|
|
return (
|
|
<>
|
|
{/* 팔레트 그룹 - 박스 하단에 붙어있도록 */}
|
|
<group position={[0, palletYOffset, 0]}>
|
|
{/* 상단 가로 판자들 (5개) */}
|
|
{[-boxDepth * 0.4, -boxDepth * 0.2, 0, boxDepth * 0.2, boxDepth * 0.4].map((zOffset, idx) => (
|
|
<Box
|
|
key={`top-${idx}`}
|
|
args={[boxWidth * 0.95, palletHeight * 0.3, boxDepth * 0.15]}
|
|
position={[0, palletHeight * 0.35, zOffset]}
|
|
>
|
|
<meshStandardMaterial color="#8B4513" roughness={0.95} metalness={0.0} />
|
|
<lineSegments>
|
|
<edgesGeometry
|
|
args={[new THREE.BoxGeometry(boxWidth * 0.95, palletHeight * 0.3, boxDepth * 0.15)]}
|
|
/>
|
|
<lineBasicMaterial color="#000000" opacity={0.3} transparent />
|
|
</lineSegments>
|
|
</Box>
|
|
))}
|
|
|
|
{/* 중간 세로 받침대 (3개) */}
|
|
{[-boxWidth * 0.35, 0, boxWidth * 0.35].map((xOffset, idx) => (
|
|
<Box
|
|
key={`middle-${idx}`}
|
|
args={[boxWidth * 0.12, palletHeight * 0.4, boxDepth * 0.2]}
|
|
position={[xOffset, 0, 0]}
|
|
>
|
|
<meshStandardMaterial color="#654321" roughness={0.98} metalness={0.0} />
|
|
<lineSegments>
|
|
<edgesGeometry
|
|
args={[new THREE.BoxGeometry(boxWidth * 0.12, palletHeight * 0.4, boxDepth * 0.2)]}
|
|
/>
|
|
<lineBasicMaterial color="#000000" opacity={0.4} transparent />
|
|
</lineSegments>
|
|
</Box>
|
|
))}
|
|
|
|
{/* 하단 가로 판자들 (3개) */}
|
|
{[-boxDepth * 0.3, 0, boxDepth * 0.3].map((zOffset, idx) => (
|
|
<Box
|
|
key={`bottom-${idx}`}
|
|
args={[boxWidth * 0.95, palletHeight * 0.25, boxDepth * 0.18]}
|
|
position={[0, -palletHeight * 0.35, zOffset]}
|
|
>
|
|
<meshStandardMaterial color="#6B4423" roughness={0.97} metalness={0.0} />
|
|
<lineSegments>
|
|
<edgesGeometry
|
|
args={[new THREE.BoxGeometry(boxWidth * 0.95, palletHeight * 0.25, boxDepth * 0.18)]}
|
|
/>
|
|
<lineBasicMaterial color="#000000" opacity={0.3} transparent />
|
|
</lineSegments>
|
|
</Box>
|
|
))}
|
|
</group>
|
|
|
|
{/* 메인 박스 */}
|
|
<Box args={[boxWidth, boxHeight, boxDepth]} position={[0, 0, 0]}>
|
|
{/* 메인 재질 - 골판지 느낌 */}
|
|
<meshStandardMaterial
|
|
color={placement.color}
|
|
opacity={isConfigured ? (isSelected ? 1 : 0.8) : 0.5}
|
|
transparent
|
|
emissive={isSelected ? "#ffffff" : "#000000"}
|
|
emissiveIntensity={isSelected ? 0.2 : 0}
|
|
wireframe={!isConfigured}
|
|
roughness={0.95}
|
|
metalness={0.05}
|
|
/>
|
|
|
|
{/* 외곽선 - 더 진하게 */}
|
|
<lineSegments>
|
|
<edgesGeometry args={[new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth)]} />
|
|
<lineBasicMaterial color="#000000" opacity={0.6} transparent linewidth={1.5} />
|
|
</lineSegments>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<group
|
|
ref={meshRef}
|
|
position={[placement.position_x, placement.position_y, placement.position_z]}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
e.nativeEvent?.stopPropagation();
|
|
e.nativeEvent?.stopImmediatePropagation();
|
|
onClick();
|
|
}}
|
|
onPointerDown={handlePointerDown}
|
|
onPointerOver={() => {
|
|
if (onDrag) {
|
|
gl.domElement.style.cursor = isSelected ? "grab" : "pointer";
|
|
} else {
|
|
gl.domElement.style.cursor = "pointer";
|
|
}
|
|
}}
|
|
onPointerOut={() => {
|
|
if (!isDragging) {
|
|
gl.domElement.style.cursor = "default";
|
|
}
|
|
}}
|
|
>
|
|
{renderObjectByType()}
|
|
</group>
|
|
);
|
|
}
|
|
|
|
// 3D 씬 컴포넌트
|
|
// 카메라 포커스 컨트롤러
|
|
function CameraFocusController({
|
|
focusOnPlacementId,
|
|
placements,
|
|
orbitControlsRef,
|
|
}: {
|
|
focusOnPlacementId?: number | null;
|
|
placements: YardPlacement[];
|
|
orbitControlsRef: React.RefObject<any>;
|
|
}) {
|
|
const { camera } = useThree();
|
|
|
|
useEffect(() => {
|
|
console.log("🎥 CameraFocusController triggered");
|
|
console.log(" - focusOnPlacementId:", focusOnPlacementId);
|
|
console.log(" - orbitControlsRef.current:", orbitControlsRef.current);
|
|
console.log(" - placements count:", placements.length);
|
|
|
|
if (focusOnPlacementId && orbitControlsRef.current) {
|
|
const targetPlacement = placements.find((p) => p.id === focusOnPlacementId);
|
|
console.log(" - targetPlacement:", targetPlacement);
|
|
|
|
if (targetPlacement) {
|
|
console.log("✅ Starting camera animation to:", targetPlacement.material_name || targetPlacement.id);
|
|
|
|
const controls = orbitControlsRef.current;
|
|
const targetPosition = new THREE.Vector3(
|
|
targetPlacement.position_x,
|
|
targetPlacement.position_y,
|
|
targetPlacement.position_z,
|
|
);
|
|
|
|
// 카메라 위치 계산 (요소 위에서 약간 비스듬히)
|
|
const cameraOffset = new THREE.Vector3(15, 15, 15);
|
|
const newCameraPosition = targetPosition.clone().add(cameraOffset);
|
|
|
|
// 부드러운 애니메이션으로 카메라 이동
|
|
const startPos = camera.position.clone();
|
|
const startTarget = controls.target.clone();
|
|
const duration = 1000; // 1초
|
|
const startTime = Date.now();
|
|
|
|
const animate = () => {
|
|
const elapsed = Date.now() - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
|
|
// easeInOutCubic 이징 함수
|
|
const eased = progress < 0.5 ? 4 * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2;
|
|
|
|
// 카메라 위치 보간
|
|
camera.position.lerpVectors(startPos, newCameraPosition, eased);
|
|
|
|
// 카메라 타겟 보간
|
|
controls.target.lerpVectors(startTarget, targetPosition, eased);
|
|
controls.update();
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(animate);
|
|
}
|
|
};
|
|
|
|
animate();
|
|
}
|
|
}
|
|
}, [focusOnPlacementId, placements, camera, orbitControlsRef]);
|
|
|
|
return null;
|
|
}
|
|
|
|
function Scene({
|
|
placements,
|
|
selectedPlacementId,
|
|
onPlacementClick,
|
|
onPlacementDrag,
|
|
gridSize = 5,
|
|
onCollisionDetected,
|
|
focusOnPlacementId,
|
|
}: Yard3DCanvasProps) {
|
|
const [isDraggingAny, setIsDraggingAny] = useState(false);
|
|
const orbitControlsRef = useRef<any>(null);
|
|
|
|
return (
|
|
<>
|
|
{/* 카메라 포커스 컨트롤러 */}
|
|
<CameraFocusController
|
|
focusOnPlacementId={focusOnPlacementId}
|
|
placements={placements}
|
|
orbitControlsRef={orbitControlsRef}
|
|
/>
|
|
|
|
{/* 조명 */}
|
|
<ambientLight intensity={0.5} />
|
|
<directionalLight position={[10, 10, 5]} intensity={1} />
|
|
<directionalLight position={[-10, -10, -5]} intensity={0.3} />
|
|
|
|
{/* 배경색 */}
|
|
<color attach="background" args={["#f3f4f6"]} />
|
|
|
|
{/* 바닥 그리드 (타일을 4등분) */}
|
|
<Grid
|
|
args={[100, 100]}
|
|
cellSize={gridSize / 2} // 타일을 2x2로 나눔 (2.5칸)
|
|
cellThickness={0.6}
|
|
cellColor="#d1d5db" // 얇은 선 (서브 그리드) - 밝은 회색
|
|
sectionSize={gridSize} // 타일 경계선 (5칸마다)
|
|
sectionThickness={1.5}
|
|
sectionColor="#6b7280" // 타일 경계는 조금 어둡게
|
|
fadeDistance={200}
|
|
fadeStrength={1}
|
|
followCamera={false}
|
|
infiniteGrid={true}
|
|
/>
|
|
|
|
{/* 자재 박스들 */}
|
|
{placements.map((placement) => (
|
|
<MaterialBox
|
|
key={placement.id}
|
|
placement={placement}
|
|
isSelected={selectedPlacementId === placement.id}
|
|
onClick={() => onPlacementClick(placement)}
|
|
onDrag={onPlacementDrag ? (position) => onPlacementDrag(placement.id, position) : undefined}
|
|
onDragStart={() => {
|
|
setIsDraggingAny(true);
|
|
if (orbitControlsRef.current) {
|
|
orbitControlsRef.current.enabled = false;
|
|
}
|
|
}}
|
|
onDragEnd={() => {
|
|
setIsDraggingAny(false);
|
|
if (orbitControlsRef.current) {
|
|
orbitControlsRef.current.enabled = true;
|
|
}
|
|
}}
|
|
gridSize={gridSize}
|
|
allPlacements={placements}
|
|
onCollisionDetected={onCollisionDetected}
|
|
/>
|
|
))}
|
|
|
|
{/* 카메라 컨트롤 */}
|
|
<OrbitControls
|
|
ref={orbitControlsRef}
|
|
enablePan={true}
|
|
enableZoom={true}
|
|
enableRotate={true}
|
|
minDistance={8}
|
|
maxDistance={200}
|
|
maxPolarAngle={Math.PI / 2}
|
|
enabled={!isDraggingAny}
|
|
screenSpacePanning={true} // 화면 공간 패닝
|
|
panSpeed={0.8} // 패닝 속도 (기본값 1.0, 낮을수록 느림)
|
|
rotateSpeed={0.5} // 회전 속도
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default function Yard3DCanvas({
|
|
placements,
|
|
selectedPlacementId,
|
|
onPlacementClick,
|
|
onPlacementDrag,
|
|
gridSize = 5,
|
|
onCollisionDetected,
|
|
focusOnPlacementId,
|
|
}: Yard3DCanvasProps) {
|
|
const handleCanvasClick = (e: any) => {
|
|
// Canvas의 빈 공간을 클릭했을 때만 선택 해제
|
|
// e.target이 canvas 엘리먼트인 경우
|
|
if (e.target.tagName === "CANVAS") {
|
|
onPlacementClick(null as any);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="h-full w-full bg-gray-100" onClick={handleCanvasClick}>
|
|
<Canvas
|
|
camera={{
|
|
position: [50, 30, 50],
|
|
fov: 50,
|
|
}}
|
|
shadows
|
|
gl={{ preserveDrawingBuffer: true }}
|
|
>
|
|
<Suspense fallback={null}>
|
|
<Scene
|
|
placements={placements}
|
|
selectedPlacementId={selectedPlacementId}
|
|
onPlacementClick={onPlacementClick}
|
|
onPlacementDrag={onPlacementDrag}
|
|
gridSize={gridSize}
|
|
onCollisionDetected={onCollisionDetected}
|
|
focusOnPlacementId={focusOnPlacementId}
|
|
/>
|
|
</Suspense>
|
|
</Canvas>
|
|
</div>
|
|
);
|
|
}
|