feat: Introduce asset display and search UI, robotic arm animation logic, and core simulation handling.
This commit is contained in:
@@ -111,7 +111,6 @@ const Assets: React.FC = () => {
|
||||
onClick={async () => {
|
||||
setIsLoading(true);
|
||||
const res = await fetchCategoryDecals(cat.name);
|
||||
console.log('res: ', res);
|
||||
setAssets(res);
|
||||
setSelectedDecalCategory(cat.name);
|
||||
setIsLoading(false);
|
||||
|
||||
@@ -36,6 +36,7 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone
|
||||
const { getMaterialById, getMaterialPosition } = materialStore();
|
||||
const { getEventByModelUuid, getActionByUuid, getPointByUuid, getTriggeringModels, selectedProduct } = productStore();
|
||||
const { scene } = useThree();
|
||||
const showHelper = false;
|
||||
|
||||
let curveHeight = 1.75;
|
||||
const CIRCLE_RADIUS = 1.6;
|
||||
@@ -366,59 +367,47 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* {customCurvePoints && customCurvePoints?.length >= 2 && currentPath && isPlaying && (
|
||||
<mesh rotation={armBot.rotation} position={armBot.position} visible={false}>
|
||||
<Line
|
||||
points={customCurvePoints.map((p) => [p.x, p.y, p.z] as [number, number, number])}
|
||||
color="green"
|
||||
lineWidth={5}
|
||||
dashed={false}
|
||||
/>
|
||||
</mesh>
|
||||
)}
|
||||
<group
|
||||
position={[armBot.position[0], armBot.position[1] + 1.5, armBot.position[2]]}
|
||||
rotation={[armBot.rotation[0], armBot.rotation[1], armBot.rotation[2]]}
|
||||
visible={false}
|
||||
>
|
||||
<mesh rotation={[-Math.PI / 2, 0, 0]} visible={false}>
|
||||
<ringGeometry args={[CIRCLE_RADIUS, CIRCLE_RADIUS + 0.02, 64]} />
|
||||
<meshBasicMaterial color="green" side={THREE.DoubleSide} />
|
||||
</mesh>
|
||||
|
||||
{[90, 180, 270, 360].map((degree, index) => {
|
||||
const rad = ((degree) * Math.PI) / 180;
|
||||
const x = CIRCLE_RADIUS * Math.cos(rad);
|
||||
const z = CIRCLE_RADIUS * Math.sin(rad);
|
||||
const y = 0;
|
||||
return (
|
||||
<mesh key={index} position={[x, y, z]}>
|
||||
<sphereGeometry args={[0.05, 16, 16]} />
|
||||
<meshStandardMaterial color="red" />
|
||||
{showHelper && (
|
||||
<>
|
||||
{customCurvePoints && customCurvePoints?.length >= 2 && currentPath && isPlaying && (
|
||||
<mesh rotation={armBot.rotation} position={armBot.position} visible={false}>
|
||||
<Line points={customCurvePoints.map((p) => [p.x, p.y, p.z] as [number, number, number])} color="green" lineWidth={5} dashed={false} />
|
||||
</mesh>
|
||||
)}
|
||||
<group position={[armBot.position[0], armBot.position[1] + 1.5, armBot.position[2]]} rotation={[armBot.rotation[0], armBot.rotation[1], armBot.rotation[2]]} visible={false}>
|
||||
<mesh rotation={[-Math.PI / 2, 0, 0]} visible={false}>
|
||||
<ringGeometry args={[CIRCLE_RADIUS, CIRCLE_RADIUS + 0.02, 64]} />
|
||||
<meshBasicMaterial color="green" side={THREE.DoubleSide} />
|
||||
</mesh>
|
||||
);
|
||||
})}
|
||||
|
||||
{[90, 180, 270, 360].map((degree, index) => {
|
||||
const rad = ((degree) * Math.PI) / 180;
|
||||
const x = CIRCLE_RADIUS * Math.cos(rad);
|
||||
const z = CIRCLE_RADIUS * Math.sin(rad);
|
||||
const y = 0.15;
|
||||
{[90, 180, 270, 360].map((degree, index) => {
|
||||
const rad = (degree * Math.PI) / 180;
|
||||
const x = CIRCLE_RADIUS * Math.cos(rad);
|
||||
const z = CIRCLE_RADIUS * Math.sin(rad);
|
||||
const y = 0;
|
||||
return (
|
||||
<mesh key={index} position={[x, y, z]}>
|
||||
<sphereGeometry args={[0.05, 16, 16]} />
|
||||
<meshStandardMaterial color="red" />
|
||||
</mesh>
|
||||
);
|
||||
})}
|
||||
|
||||
return (
|
||||
<Text
|
||||
key={`text-${index}`}
|
||||
position={[x, y, z]}
|
||||
fontSize={0.2}
|
||||
color="yellow"
|
||||
anchorX="center"
|
||||
anchorY="middle"
|
||||
>
|
||||
{degree}°
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</group> */}
|
||||
{[90, 180, 270, 360].map((degree, index) => {
|
||||
const rad = (degree * Math.PI) / 180;
|
||||
const x = CIRCLE_RADIUS * Math.cos(rad);
|
||||
const z = CIRCLE_RADIUS * Math.sin(rad);
|
||||
const y = 0.15;
|
||||
|
||||
return (
|
||||
<Text key={`text-${index}`} position={[x, y, z]} fontSize={0.2} color="yellow" anchorX="center" anchorY="middle">
|
||||
{degree}°
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</group>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ import { heatMapImageApi } from "../../../services/simulation/products/heatMapIm
|
||||
import { useHeatMapStore } from "../../../store/simulation/useHeatMapStore";
|
||||
import * as CONSTANTS from "../../../types/world/worldConstants";
|
||||
import { useThree } from "@react-three/fiber";
|
||||
|
||||
const SimulationHandler = () => {
|
||||
const {
|
||||
materialStore,
|
||||
|
||||
Reference in New Issue
Block a user