634 lines
22 KiB
TypeScript
634 lines
22 KiB
TypeScript
|
|
import React, { useRef, useMemo } from 'react';
|
|
import { Canvas, useFrame } from '@react-three/fiber';
|
|
import { OrbitControls, Grid, PerspectiveCamera, Text, Box, Environment, RoundedBox } from '@react-three/drei';
|
|
import * as THREE from 'three';
|
|
import { RobotTarget, IOPoint } from '../types';
|
|
|
|
interface Machine3DProps {
|
|
target: RobotTarget;
|
|
ioState: IOPoint[];
|
|
doorStates: {
|
|
front: boolean;
|
|
right: boolean;
|
|
left: boolean;
|
|
back: boolean;
|
|
};
|
|
}
|
|
|
|
// -- Parts Components --
|
|
|
|
const TowerLamp = ({ ioState }: { ioState: IOPoint[] }) => {
|
|
// Outputs 0,1,2 mapped to Red, Yellow, Green
|
|
const redOn = ioState.find(io => io.id === 0 && io.type === 'output')?.state;
|
|
const yellowOn = ioState.find(io => io.id === 1 && io.type === 'output')?.state;
|
|
const greenOn = ioState.find(io => io.id === 2 && io.type === 'output')?.state;
|
|
|
|
const redMat = useRef<THREE.MeshStandardMaterial>(null);
|
|
const yelMat = useRef<THREE.MeshStandardMaterial>(null);
|
|
const grnMat = useRef<THREE.MeshStandardMaterial>(null);
|
|
|
|
useFrame((state) => {
|
|
const time = state.clock.elapsedTime;
|
|
const pulse = (Math.sin(time * 6) * 0.5 + 0.5);
|
|
const intensity = 0.5 + (pulse * 3.0);
|
|
|
|
if (redMat.current) {
|
|
redMat.current.emissiveIntensity = redOn ? intensity : 0;
|
|
redMat.current.opacity = redOn ? 1.0 : 0.3;
|
|
redMat.current.color.setHex(redOn ? 0xff0000 : 0x550000);
|
|
}
|
|
if (yelMat.current) {
|
|
yelMat.current.emissiveIntensity = yellowOn ? intensity : 0;
|
|
yelMat.current.opacity = yellowOn ? 1.0 : 0.3;
|
|
yelMat.current.color.setHex(yellowOn ? 0xffff00 : 0x555500);
|
|
}
|
|
if (grnMat.current) {
|
|
grnMat.current.emissiveIntensity = greenOn ? intensity : 0;
|
|
grnMat.current.opacity = greenOn ? 1.0 : 0.3;
|
|
grnMat.current.color.setHex(greenOn ? 0x00ff00 : 0x005500);
|
|
}
|
|
});
|
|
|
|
return (
|
|
<group position={[1.8, 2.5, -1.8]}>
|
|
{/* Pole */}
|
|
<mesh position={[0, 0, 0]}>
|
|
<cylinderGeometry args={[0.05, 0.05, 0.5]} />
|
|
<meshStandardMaterial color="#333" roughness={0.5} />
|
|
</mesh>
|
|
{/* Green */}
|
|
<mesh position={[0, 0.3, 0]}>
|
|
<cylinderGeometry args={[0.08, 0.08, 0.15]} />
|
|
<meshStandardMaterial
|
|
ref={grnMat}
|
|
color="#00ff00"
|
|
emissive="#00ff00"
|
|
transparent
|
|
toneMapped={false}
|
|
/>
|
|
</mesh>
|
|
{/* Yellow */}
|
|
<mesh position={[0, 0.46, 0]}>
|
|
<cylinderGeometry args={[0.08, 0.08, 0.15]} />
|
|
<meshStandardMaterial
|
|
ref={yelMat}
|
|
color="#ffff00"
|
|
emissive="#ffff00"
|
|
transparent
|
|
toneMapped={false}
|
|
/>
|
|
</mesh>
|
|
{/* Red */}
|
|
<mesh position={[0, 0.62, 0]}>
|
|
<cylinderGeometry args={[0.08, 0.08, 0.15]} />
|
|
<meshStandardMaterial
|
|
ref={redMat}
|
|
color="#ff0000"
|
|
emissive="#ff0000"
|
|
transparent
|
|
toneMapped={false}
|
|
/>
|
|
</mesh>
|
|
</group>
|
|
);
|
|
};
|
|
|
|
// -- DIPPING STATION COMPONENTS --
|
|
|
|
const LiquidBath = ({
|
|
position,
|
|
label,
|
|
liquidColor,
|
|
}: {
|
|
position: [number, number, number],
|
|
label: string,
|
|
liquidColor: string,
|
|
}) => {
|
|
const width = 1.0;
|
|
const depth = 0.8;
|
|
const height = 0.3;
|
|
const wallThick = 0.03;
|
|
|
|
const SteelMaterial = (
|
|
<meshStandardMaterial color="#e2e8f0" metalness={0.95} roughness={0.2} />
|
|
);
|
|
|
|
return (
|
|
<group position={position}>
|
|
<group position={[0, height / 2, 0]}>
|
|
<mesh position={[0, -height/2 + wallThick/2, 0]}>
|
|
<boxGeometry args={[width, wallThick, depth]} />
|
|
{SteelMaterial}
|
|
</mesh>
|
|
<mesh position={[0, 0, depth/2 - wallThick/2]}>
|
|
<boxGeometry args={[width, height, wallThick]} />
|
|
{SteelMaterial}
|
|
</mesh>
|
|
<mesh position={[0, 0, -depth/2 + wallThick/2]}>
|
|
<boxGeometry args={[width, height, wallThick]} />
|
|
{SteelMaterial}
|
|
</mesh>
|
|
<mesh position={[-width/2 + wallThick/2, 0, 0]}>
|
|
<boxGeometry args={[wallThick, height, depth - wallThick*2]} />
|
|
{SteelMaterial}
|
|
</mesh>
|
|
<mesh position={[width/2 - wallThick/2, 0, 0]}>
|
|
<boxGeometry args={[wallThick, height, depth - wallThick*2]} />
|
|
{SteelMaterial}
|
|
</mesh>
|
|
<mesh position={[0, height/2 - 0.05, 0]} rotation={[-Math.PI / 2, 0, 0]}>
|
|
<planeGeometry args={[width - wallThick*2, depth - wallThick*2]} />
|
|
<meshPhysicalMaterial
|
|
color={liquidColor}
|
|
transparent
|
|
opacity={0.85}
|
|
roughness={0.05}
|
|
metalness={0.2}
|
|
transmission={0.4}
|
|
thickness={1}
|
|
clearcoat={1}
|
|
/>
|
|
</mesh>
|
|
</group>
|
|
<Text
|
|
position={[0, 0.6, 0.55]}
|
|
fontSize={0.12}
|
|
color="white"
|
|
anchorX="center"
|
|
anchorY="middle"
|
|
rotation={[-Math.PI/4, 0, 0]}
|
|
>
|
|
{label}
|
|
</Text>
|
|
</group>
|
|
);
|
|
};
|
|
|
|
const HakkoFX305 = ({ position }: { position: [number, number, number] }) => {
|
|
return (
|
|
<group position={position}>
|
|
{/* Main Blue Chassis */}
|
|
<mesh position={[0, 0.25, 0]}>
|
|
<boxGeometry args={[1.3, 0.55, 1.0]} />
|
|
<meshStandardMaterial color="#2563eb" metalness={0.1} roughness={0.4} />
|
|
</mesh>
|
|
|
|
<mesh position={[-0.66, 0.25, 0]}>
|
|
<boxGeometry args={[0.02, 0.3, 0.6]} />
|
|
<meshStandardMaterial color="#1e3a8a" />
|
|
</mesh>
|
|
<mesh position={[0.66, 0.25, 0]}>
|
|
<boxGeometry args={[0.02, 0.3, 0.6]} />
|
|
<meshStandardMaterial color="#1e3a8a" />
|
|
</mesh>
|
|
|
|
<mesh position={[0, 0.25, 0.51]}>
|
|
<planeGeometry args={[1.25, 0.5]} />
|
|
<meshStandardMaterial color="#cbd5e1" metalness={0.6} roughness={0.3} />
|
|
</mesh>
|
|
|
|
<Text
|
|
position={[0, 0.42, 0.52]}
|
|
fontSize={0.08}
|
|
color="#2563eb"
|
|
anchorX="center"
|
|
anchorY="middle"
|
|
fontWeight="bold"
|
|
>
|
|
HAKKO
|
|
</Text>
|
|
<Text
|
|
position={[0.5, 0.42, 0.52]}
|
|
fontSize={0.04}
|
|
color="#64748b"
|
|
anchorX="right"
|
|
anchorY="middle"
|
|
>
|
|
FX-305
|
|
</Text>
|
|
|
|
<mesh position={[0.15, 0.25, 0.52]}>
|
|
<planeGeometry args={[0.35, 0.15]} />
|
|
<meshStandardMaterial color="#0f172a" roughness={0.2} />
|
|
</mesh>
|
|
|
|
<group position={[-0.45, 0.25, 0.52]} rotation={[Math.PI/2, 0, 0]}>
|
|
<mesh>
|
|
<cylinderGeometry args={[0.08, 0.08, 0.02, 32]} />
|
|
<meshStandardMaterial color="#1e293b" />
|
|
</mesh>
|
|
<mesh position={[0, 0.02, 0]} rotation={[0, 0, Math.PI/2]}>
|
|
<boxGeometry args={[0.02, 0.08, 0.01]} />
|
|
<meshStandardMaterial color="#475569" />
|
|
</mesh>
|
|
</group>
|
|
|
|
<group position={[0.15, 0.12, 0.52]}>
|
|
{[-0.12, 0, 0.12, 0.24].map((x, i) => (
|
|
<mesh key={i} position={[x, 0, 0]} rotation={[Math.PI/2, 0, 0]}>
|
|
<cylinderGeometry args={[0.035, 0.035, 0.02, 16]} />
|
|
<meshStandardMaterial color="#facc15" />
|
|
</mesh>
|
|
))}
|
|
</group>
|
|
|
|
<mesh position={[0, 0.55, 0]}>
|
|
<boxGeometry args={[0.9, 0.05, 0.7]} />
|
|
<meshStandardMaterial color="#94a3b8" metalness={0.8} roughness={0.3} />
|
|
</mesh>
|
|
|
|
<group position={[0, 0.58, 0]}>
|
|
<mesh position={[0, 0, -0.3]}>
|
|
<boxGeometry args={[0.8, 0.05, 0.05]} />
|
|
<meshStandardMaterial color="#64748b" metalness={0.7} />
|
|
</mesh>
|
|
<mesh position={[0, 0, 0.3]}>
|
|
<boxGeometry args={[0.8, 0.05, 0.05]} />
|
|
<meshStandardMaterial color="#64748b" metalness={0.7} />
|
|
</mesh>
|
|
<mesh position={[-0.4, 0, 0]}>
|
|
<boxGeometry args={[0.05, 0.05, 0.65]} />
|
|
<meshStandardMaterial color="#64748b" metalness={0.7} />
|
|
</mesh>
|
|
<mesh position={[0.4, 0, 0]}>
|
|
<boxGeometry args={[0.05, 0.05, 0.65]} />
|
|
<meshStandardMaterial color="#64748b" metalness={0.7} />
|
|
</mesh>
|
|
</group>
|
|
|
|
<mesh position={[0, 0.57, 0]} rotation={[-Math.PI / 2, 0, 0]}>
|
|
<planeGeometry args={[0.75, 0.6]} />
|
|
<meshPhysicalMaterial
|
|
color="#e2e8f0"
|
|
emissive="#cbd5e1"
|
|
emissiveIntensity={0.1}
|
|
roughness={0.02}
|
|
metalness={1.0}
|
|
clearcoat={1}
|
|
reflectivity={1}
|
|
/>
|
|
</mesh>
|
|
|
|
<Text
|
|
position={[0, 0.9, 0.6]}
|
|
fontSize={0.15}
|
|
color="#fbbf24"
|
|
anchorX="center"
|
|
anchorY="middle"
|
|
rotation={[-Math.PI/4, 0, 0]}
|
|
>
|
|
2. HAKKO SOLDER
|
|
</Text>
|
|
</group>
|
|
);
|
|
};
|
|
|
|
const DippingStations = () => {
|
|
return (
|
|
<group>
|
|
<mesh position={[0, 0.2, 0]}>
|
|
<boxGeometry args={[4.5, 0.4, 1.5]} />
|
|
<meshStandardMaterial color="#334155" roughness={0.5} metalness={0.5} />
|
|
</mesh>
|
|
<LiquidBath position={[-1.5, 0.4, 0]} label="1. FLUX" liquidColor="#fef08a" />
|
|
<HakkoFX305 position={[0, 0.4, 0]} />
|
|
<LiquidBath position={[1.5, 0.4, 0]} label="3. CLEAN" liquidColor="#bae6fd" />
|
|
</group>
|
|
);
|
|
};
|
|
|
|
const Door = ({
|
|
position,
|
|
rotation = [0,0,0],
|
|
size,
|
|
isOpen
|
|
}: {
|
|
position: [number, number, number],
|
|
rotation?: [number, number, number],
|
|
size: [number, number],
|
|
isOpen: boolean
|
|
}) => {
|
|
const meshRef = useRef<THREE.Mesh>(null);
|
|
|
|
useFrame((state, delta) => {
|
|
if (!meshRef.current) return;
|
|
const targetY = isOpen ? position[1] + 2 : position[1];
|
|
meshRef.current.position.y = THREE.MathUtils.lerp(meshRef.current.position.y, targetY, delta * 5);
|
|
});
|
|
|
|
return (
|
|
<mesh ref={meshRef} position={position} rotation={rotation as any}>
|
|
<planeGeometry args={[size[0], size[1]]} />
|
|
<meshPhysicalMaterial
|
|
color="#a5f3fc"
|
|
transparent
|
|
opacity={0.2}
|
|
roughness={0}
|
|
metalness={0.9}
|
|
side={THREE.DoubleSide}
|
|
depthWrite={false}
|
|
/>
|
|
<mesh position={[size[0]/2 - 0.1, 0, 0.02]}>
|
|
<boxGeometry args={[0.05, size[1], 0.05]} />
|
|
<meshStandardMaterial color="#cbd5e1" />
|
|
</mesh>
|
|
<mesh position={[-size[0]/2 + 0.1, 0, 0.02]}>
|
|
<boxGeometry args={[0.05, size[1], 0.05]} />
|
|
<meshStandardMaterial color="#cbd5e1" />
|
|
</mesh>
|
|
</mesh>
|
|
);
|
|
};
|
|
|
|
const MachineFrame = ({ doorStates }: { doorStates: { front: boolean, right: boolean, left: boolean, back: boolean } }) => {
|
|
return (
|
|
<group>
|
|
<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.05, 0]}>
|
|
<planeGeometry args={[6, 6]} />
|
|
<meshStandardMaterial color="#0f172a" roughness={0.8} metalness={0.2} />
|
|
</mesh>
|
|
<Grid infiniteGrid fadeDistance={15} sectionColor="#475569" cellColor="#1e293b" />
|
|
|
|
{[[-2, -2], [2, -2], [2, 2], [-2, 2]].map(([x, z], i) => (
|
|
<mesh key={i} position={[x, 1.5, z]}>
|
|
<boxGeometry args={[0.15, 3, 0.15]} />
|
|
<meshStandardMaterial color="#64748b" metalness={0.8} roughness={0.2} />
|
|
</mesh>
|
|
))}
|
|
|
|
<group position={[0, 3, 0]}>
|
|
<mesh position={[0, 0, -2]}>
|
|
<boxGeometry args={[4.15, 0.15, 0.15]} />
|
|
<meshStandardMaterial color="#64748b" metalness={0.8} roughness={0.2} />
|
|
</mesh>
|
|
<mesh position={[0, 0, 2]}>
|
|
<boxGeometry args={[4.15, 0.15, 0.15]} />
|
|
<meshStandardMaterial color="#64748b" metalness={0.8} roughness={0.2} />
|
|
</mesh>
|
|
<mesh position={[-2, 0, 0]}>
|
|
<boxGeometry args={[0.15, 0.15, 4.15]} />
|
|
<meshStandardMaterial color="#64748b" metalness={0.8} roughness={0.2} />
|
|
</mesh>
|
|
<mesh position={[2, 0, 0]}>
|
|
<boxGeometry args={[0.15, 0.15, 4.15]} />
|
|
<meshStandardMaterial color="#64748b" metalness={0.8} roughness={0.2} />
|
|
</mesh>
|
|
</group>
|
|
|
|
<Door position={[0, 1.5, 2]} size={[4, 3]} isOpen={doorStates.front} />
|
|
<Door position={[0, 1.5, -2]} size={[4, 3]} isOpen={doorStates.back} />
|
|
<Door position={[-2, 1.5, 0]} rotation={[0, Math.PI/2, 0]} size={[4, 3]} isOpen={doorStates.left} />
|
|
<Door position={[2, 1.5, 0]} rotation={[0, Math.PI/2, 0]} size={[4, 3]} isOpen={doorStates.right} />
|
|
<DippingStations />
|
|
</group>
|
|
);
|
|
};
|
|
|
|
// --- MISUMI STYLE INDUSTRIAL ACTUATOR COMPONENT ---
|
|
|
|
const IndustrialActuatorRail = ({ length, label, hasMotor = true }: { length: number, label?: string, hasMotor?: boolean }) => {
|
|
const width = 0.14; // Actuator Width
|
|
const height = 0.08; // Actuator Height (Profile)
|
|
|
|
return (
|
|
<group>
|
|
{/* 1. Main Aluminum Body (White/Light Grey Matte) */}
|
|
<RoundedBox args={[width, height, length]} radius={0.01} smoothness={4}>
|
|
<meshStandardMaterial color="#f8fafc" roughness={0.8} metalness={0.1} />
|
|
</RoundedBox>
|
|
|
|
{/* 2. Top Stainless Steel Cover Strip */}
|
|
<mesh position={[0, height/2 + 0.001, 0]}>
|
|
<boxGeometry args={[width * 0.7, 0.002, length]} />
|
|
<meshStandardMaterial color="#cbd5e1" metalness={0.9} roughness={0.2} />
|
|
</mesh>
|
|
|
|
{/* 3. Black Gap/Slit for Slider */}
|
|
<mesh position={[0, height/2, 0]}>
|
|
<boxGeometry args={[width * 0.8, 0.01, length * 0.98]} />
|
|
<meshStandardMaterial color="#0f172a" roughness={0.9} />
|
|
</mesh>
|
|
|
|
{/* 4. End Caps (Plastic White) */}
|
|
<group position={[0, 0, length/2 + 0.02]}>
|
|
<RoundedBox args={[width + 0.01, height + 0.01, 0.04]} radius={0.02} smoothness={4}>
|
|
<meshStandardMaterial color="#e2e8f0" />
|
|
</RoundedBox>
|
|
</group>
|
|
<group position={[0, 0, -length/2 - 0.02]}>
|
|
<RoundedBox args={[width + 0.01, height + 0.01, 0.04]} radius={0.02} smoothness={4}>
|
|
<meshStandardMaterial color="#e2e8f0" />
|
|
</RoundedBox>
|
|
</group>
|
|
|
|
{/* 5. Servo Motor Unit (Black & Silver) */}
|
|
{hasMotor && (
|
|
<group position={[0, 0, -length/2 - 0.15]}>
|
|
{/* Flange */}
|
|
<mesh position={[0, 0, 0.08]}>
|
|
<boxGeometry args={[0.12, 0.12, 0.05]} />
|
|
<meshStandardMaterial color="#475569" metalness={0.8} />
|
|
</mesh>
|
|
{/* Motor Body */}
|
|
<mesh position={[0, 0, 0]} rotation={[Math.PI/2, 0, 0]}>
|
|
<cylinderGeometry args={[0.05, 0.05, 0.2, 32]} />
|
|
<meshStandardMaterial color="#1e293b" metalness={0.6} roughness={0.4} />
|
|
</mesh>
|
|
{/* Encoder Cap */}
|
|
<mesh position={[0, 0, -0.11]} rotation={[Math.PI/2, 0, 0]}>
|
|
<cylinderGeometry args={[0.045, 0.045, 0.05, 32]} />
|
|
<meshStandardMaterial color="#000000" />
|
|
</mesh>
|
|
{/* Cable Gland */}
|
|
<mesh position={[0, 0.04, -0.05]}>
|
|
<boxGeometry args={[0.03, 0.03, 0.03]} />
|
|
<meshStandardMaterial color="#333" />
|
|
</mesh>
|
|
</group>
|
|
)}
|
|
|
|
{/* 6. Label/Branding */}
|
|
{label && (
|
|
<Text
|
|
position={[width/2 + 0.01, 0, length/2 - 0.2]}
|
|
rotation={[0, Math.PI/2, 0]}
|
|
fontSize={0.06}
|
|
color="#334155"
|
|
fontWeight="bold"
|
|
anchorX="right"
|
|
>
|
|
{label}
|
|
</Text>
|
|
)}
|
|
</group>
|
|
);
|
|
}
|
|
|
|
// The Moving Block on top of the actuator
|
|
const IndustrialSlider = ({ width = 0.16, length = 0.18, height = 0.03 }) => {
|
|
return (
|
|
<group position={[0, 0.06, 0]}>
|
|
<RoundedBox args={[width, height, length]} radius={0.005} smoothness={2}>
|
|
<meshStandardMaterial color="#f1f5f9" metalness={0.4} roughness={0.5} />
|
|
</RoundedBox>
|
|
{/* Mounting Holes (Visual) */}
|
|
{[-1, 1].map(x => [-1, 1].map(z => (
|
|
<mesh key={`${x}-${z}`} position={[x * 0.06, height/2 + 0.001, z * 0.07]} rotation={[Math.PI/2, 0, 0]}>
|
|
<circleGeometry args={[0.008, 16]} />
|
|
<meshStandardMaterial color="#94a3b8" />
|
|
</mesh>
|
|
)))}
|
|
</group>
|
|
)
|
|
}
|
|
|
|
// -- MAIN ROBOT ASSEMBLY --
|
|
|
|
const Robot = ({ target }: { target: RobotTarget }) => {
|
|
const bridgeGroup = useRef<THREE.Group>(null);
|
|
const carriageGroup = useRef<THREE.Group>(null);
|
|
const zAxisGroup = useRef<THREE.Group>(null);
|
|
|
|
useFrame((state, delta) => {
|
|
if (bridgeGroup.current) {
|
|
// Y-Axis Movement
|
|
bridgeGroup.current.position.z = THREE.MathUtils.lerp(bridgeGroup.current.position.z, target.y, delta * 3);
|
|
}
|
|
if (carriageGroup.current) {
|
|
// X-Axis Movement
|
|
carriageGroup.current.position.x = THREE.MathUtils.lerp(carriageGroup.current.position.x, target.x, delta * 3);
|
|
}
|
|
if (zAxisGroup.current) {
|
|
// Z-Axis Movement
|
|
zAxisGroup.current.position.y = THREE.MathUtils.lerp(zAxisGroup.current.position.y, target.z, delta * 3);
|
|
}
|
|
});
|
|
|
|
return (
|
|
<group position={[0, 2.0, 0]}>
|
|
|
|
{/* --- Y-AXIS (Left & Right Fixed Actuators) --- */}
|
|
<group>
|
|
<group position={[-1.8, 0, 0]}>
|
|
<IndustrialActuatorRail length={3.8} label="MISUMI-Y1" />
|
|
</group>
|
|
<group position={[1.8, 0, 0]}>
|
|
<IndustrialActuatorRail length={3.8} label="MISUMI-Y2" />
|
|
</group>
|
|
</group>
|
|
|
|
{/* --- MOVING BRIDGE (Y-AXIS CARRIAGE + X-AXIS ACTUATOR) --- */}
|
|
<group ref={bridgeGroup}>
|
|
|
|
{/* Y-Sliders (Connecting Bridge to Y-Rails) */}
|
|
<group position={[-1.8, 0, 0]}> <IndustrialSlider /> </group>
|
|
<group position={[1.8, 0, 0]}> <IndustrialSlider /> </group>
|
|
|
|
{/* Bridge Beam Structure */}
|
|
<mesh position={[0, 0.08, 0]}>
|
|
<boxGeometry args={[4.2, 0.05, 0.25]} />
|
|
<meshStandardMaterial color="#cbd5e1" metalness={0.6} roughness={0.4} />
|
|
</mesh>
|
|
|
|
{/* X-AXIS ACTUATOR (Mounted on top of Bridge) */}
|
|
<group position={[0, 0.14, 0]} rotation={[0, Math.PI/2, 0]}>
|
|
<IndustrialActuatorRail length={3.4} label="MISUMI-X" hasMotor />
|
|
</group>
|
|
|
|
{/* --- MOVING CARRIAGE (X-AXIS SLIDER + Z-AXIS) --- */}
|
|
<group ref={carriageGroup}>
|
|
|
|
{/* X-Slider */}
|
|
<group position={[0, 0.14, 0]} rotation={[0, Math.PI/2, 0]}>
|
|
<IndustrialSlider />
|
|
</group>
|
|
|
|
{/* --- Z-AXIS ACTUATOR (Vertical) --- */}
|
|
<group position={[0, 0.2, 0.12]}>
|
|
{/* Z-Actuator Body (Fixed to X-Slider) */}
|
|
<group position={[0, 0.4, 0]} rotation={[Math.PI/2, 0, 0]}>
|
|
<IndustrialActuatorRail length={0.8} label="MISUMI-Z" hasMotor={false} />
|
|
{/* Z-Motor on Top */}
|
|
<group position={[0, 0, 0.4 + 0.15]} rotation={[0, Math.PI, 0]}>
|
|
<mesh position={[0, 0, -0.05]} rotation={[Math.PI/2, 0, 0]}>
|
|
<boxGeometry args={[0.1, 0.1, 0.12]} />
|
|
<meshStandardMaterial color="#0f172a" />
|
|
</mesh>
|
|
</group>
|
|
</group>
|
|
|
|
{/* MOVING Z-HEAD (The Slider of Z-Axis) */}
|
|
<group ref={zAxisGroup}>
|
|
<group position={[0, 0, 0.08]}>
|
|
{/* Connection Plate */}
|
|
<mesh position={[0, 0, -0.04]}>
|
|
<boxGeometry args={[0.12, 0.15, 0.02]} />
|
|
<meshStandardMaterial color="#64748b" />
|
|
</mesh>
|
|
|
|
{/* PICKER MECHANISM */}
|
|
<group position={[0, -0.2, 0]}>
|
|
<mesh position={[0, 0, 0]}>
|
|
<boxGeometry args={[0.3, 0.05, 0.1]} />
|
|
<meshStandardMaterial color="#334155" />
|
|
</mesh>
|
|
{/* Fingers */}
|
|
<mesh position={[-0.12, -0.15, 0]}>
|
|
<boxGeometry args={[0.02, 0.3, 0.05]} />
|
|
<meshStandardMaterial color="#94a3b8" metalness={0.8} />
|
|
</mesh>
|
|
<mesh position={[0.12, -0.15, 0]}>
|
|
<boxGeometry args={[0.02, 0.3, 0.05]} />
|
|
<meshStandardMaterial color="#94a3b8" metalness={0.8} />
|
|
</mesh>
|
|
|
|
{/* PCB STRIP */}
|
|
<group position={[0, -0.35, 0]}>
|
|
<mesh>
|
|
<boxGeometry args={[0.28, 0.6, 0.02]} />
|
|
<meshStandardMaterial color="#166534" roughness={0.3} />
|
|
</mesh>
|
|
<mesh position={[0, -0.28, 0.011]}>
|
|
<planeGeometry args={[0.24, 0.04]} />
|
|
<meshStandardMaterial color="#fbbf24" metalness={1.0} roughness={0.1} />
|
|
</mesh>
|
|
<mesh position={[0, 0, 0.011]}>
|
|
<planeGeometry args={[0.15, 0.15]} />
|
|
<meshStandardMaterial color="#0f172a" />
|
|
</mesh>
|
|
</group>
|
|
</group>
|
|
</group>
|
|
</group>
|
|
</group>
|
|
</group>
|
|
</group>
|
|
</group>
|
|
);
|
|
};
|
|
|
|
export const Machine3D: React.FC<Machine3DProps> = ({ target, ioState, doorStates }) => {
|
|
return (
|
|
<Canvas shadows className="w-full h-full bg-slate-900">
|
|
<PerspectiveCamera makeDefault position={[5, 5, 6]} fov={45} />
|
|
<OrbitControls
|
|
maxPolarAngle={Math.PI / 2 - 0.05}
|
|
minDistance={3}
|
|
maxDistance={12}
|
|
/>
|
|
<Environment preset="city" />
|
|
|
|
<ambientLight intensity={0.4} />
|
|
<pointLight position={[10, 10, 10]} intensity={1} castShadow />
|
|
<pointLight position={[-10, 5, -10]} intensity={0.5} />
|
|
|
|
<pointLight position={[0, 2, 0]} intensity={0.2} color="#bae6fd" distance={5} />
|
|
|
|
<MachineFrame doorStates={doorStates} />
|
|
<TowerLamp ioState={ioState} />
|
|
<Robot target={target} />
|
|
</Canvas>
|
|
);
|
|
};
|