Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: enhance conveyor collider functionality and improve scene visibility toggle

Browse Source
This commit is contained in:
Gomathi
2025-09-01 14:57:27 +05:30
parent f3ea48fcfd
commit a88c0e594b
8 changed files with 368 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/layout/sidebarRight/SideBarRight.tsx
View File

@@ -168,7 +168,7 @@ const SideBarRight: React.FC = () => {
} }
setDisplayComponent("none"); setDisplayComponent("none");
}, [viewVersionHistory, activeModule, subModule, isVersionSaved, selectedFloorItem, selectedWall, selectedFloor, selectedAisle, toolMode, selectedDecal]); }, [viewVersionHistory, activeModule, subModule, isVersionSaved, selectedFloorItem, selectedWall, selectedFloor, selectedAisle, toolMode, selectedDecal, selectedCollider]);
const renderComponent = () => { const renderComponent = () => {
switch (displayComponent) { switch (displayComponent) {

2
app/src/modules/builder/asset/models/model/model.tsx
View File

@@ -232,7 +232,7 @@ function Model({ asset, isRendered, loader }: { readonly asset: Asset, isRendere
asset={asset} asset={asset}
/> */} /> */}
{asset.eventData && asset.eventData.type === 'Conveyor' && fieldData && {asset.eventData && asset.eventData.type === 'Conveyor' && fieldData && activeModule === 'simulation' &&
<RibbonCollider <RibbonCollider
key={asset.modelUuid} key={asset.modelUuid}
boundingBox={boundingBox} boundingBox={boundingBox}

2
app/src/modules/scene/helpers/StatsHelper.tsx
View File

@@ -19,5 +19,5 @@ export default function StatsHelper() {
return () => window.removeEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown);
}, []); }, []);
return visible ? <Perf position="bottom-left" className="scene-performance-stats"/> : null; return visible ? <Perf position="bottom-left" className="scene-performance-stats" /> : null;
} }

678
app/src/modules/scene/physics/conveyor/types/curvedConveyorCollider.tsx
View File

@@ -4,368 +4,370 @@ import { useEffect, useMemo, useRef, useState } from 'react';
import { useFrame } from '@react-three/fiber'; import { useFrame } from '@react-three/fiber';
function CurvedConveyorCollider({ function CurvedConveyorCollider({
points, points,
boundingBox, boundingBox,
asset, asset,
forward, forward,
isPaused, isPaused,
onDirectionChange onDirectionChange
}: { }: {
points: [number, number, number][][]; points: [number, number, number][][];
boundingBox: THREE.Box3 | null; boundingBox: THREE.Box3 | null;
asset: Asset; asset: Asset;
forward: boolean; forward: boolean;
isPaused: boolean; isPaused: boolean;
onDirectionChange?: (newDirection: boolean) => void; onDirectionChange?: (newDirection: boolean) => void;
}) { }) {
const conveyorRef = useRef<any>(null); const conveyorRef = useRef<any>(null);
const [objectsOnConveyor, setObjectsOnConveyor] = useState<Set<any>>(new Set()); const [objectsOnConveyor, setObjectsOnConveyor] = useState<Set<any>>(new Set());
const conveyorDirection = useRef<THREE.Vector3>(new THREE.Vector3()); const conveyorDirection = useRef<THREE.Vector3>(new THREE.Vector3());
// const [forward, setForward] = useState(initialForward); // const [forward, setForward] = useState(initialForward);
const [showDirection, setShowDirection] = useState(false); const [showDirection, setShowDirection] = useState(false);
const [hoverState, setHoverState] = useState(false); const [hoverState, setHoverState] = useState(false);
const conveyorSpeed = 2; const conveyorSpeed = 2;
const lastClickTime = useRef(0); const lastClickTime = useRef(0);
const arrowRefs = useRef<THREE.Group[]>([]); const arrowRefs = useRef<THREE.Group[]>([]);
const [geometryKey, setGeometryKey] = useState(0); const [geometryKey, setGeometryKey] = useState(0);
// Toggle direction on double right click // Toggle direction on double right click
useEffect(() => { useEffect(() => {
const handleClick = (e: MouseEvent) => { const handleClick = (e: MouseEvent) => {
if (e.button === 2 && hoverState) { // Right click and hovering over conveyor if (e.button === 2 && hoverState) { // Right click and hovering over conveyor
const now = Date.now(); const now = Date.now();
if (now - lastClickTime.current < 300) { if (now - lastClickTime.current < 300) {
if (onDirectionChange) { if (onDirectionChange) {
console.log('forwardcurve: ', forward); console.log('forwardcurve: ', forward);
onDirectionChange(!forward); onDirectionChange(!forward);
} }
}
lastClickTime.current = now;
}
};
window.addEventListener('mousedown', handleClick);
return () => window.removeEventListener('mousedown', handleClick);
}, [forward, hoverState]);
const bezierPoints = useMemo(() => {
const segments = 20;
const allPoints: THREE.Vector3[] = [];
points.forEach(segment => {
let vectorPoints = segment.map(p => new THREE.Vector3(...p));
if (!forward) vectorPoints.reverse();
for (let group = 0; group + 2 < vectorPoints.length; group += 2) {
const p0 = vectorPoints[group];
const p1 = vectorPoints[group + 1];
const p2 = vectorPoints[group + 2];
for (let i = 0; i <= segments; i++) {
const t = i / segments;
const point = new THREE.Vector3()
.copy(p0)
.multiplyScalar((1 - t) ** 2)
.addScaledVector(p1, 2 * (1 - t) * t)
.addScaledVector(p2, t ** 2);
allPoints.push(point);
}
}
});
return allPoints;
}, [points, forward]);
const geometries = useMemo(() => {
const width = 1;
const segments = 20;
const geos: THREE.BufferGeometry[] = [];
points.forEach(segment => {
const vertices: number[] = [];
const indices: number[] = [];
const vectorPoint = segment.map(p => new THREE.Vector3(...p));
if (vectorPoint.length < 3) return;
for (let group = 0; group + 2 < vectorPoint.length; group += 2) {
const p0 = vectorPoint[group];
const p1 = vectorPoint[group + 1];
const p2 = vectorPoint[group + 2];
for (let i = 0; i <= segments; i++) {
const t = i / segments;
const point = new THREE.Vector3()
.copy(p0)
.multiplyScalar((1 - t) ** 2)
.addScaledVector(p1, 2 * (1 - t) * t)
.addScaledVector(p2, t ** 2);
const tangent = new THREE.Vector3()
.copy(p0)
.multiplyScalar(-2 * (1 - t))
.addScaledVector(p1, 2 - 4 * t)
.addScaledVector(p2, 2 * t)
.normalize();
const normal = new THREE.Vector3().crossVectors(tangent, new THREE.Vector3(0, 1, 0)).normalize();
const left = new THREE.Vector3().copy(point).addScaledVector(normal, -width / 2);
const right = new THREE.Vector3().copy(point).addScaledVector(normal, width / 2);
vertices.push(...left.toArray(), ...right.toArray());
}
}
const totalSegments = ((vectorPoint.length - 1) / 2) * segments;
for (let i = 0; i < totalSegments; i++) {
const base = i * 2;
indices.push(base, base + 1, base + 2);
indices.push(base + 1, base + 3, base + 2);
}
const ribbonGeometry = new THREE.BufferGeometry();
ribbonGeometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
ribbonGeometry.setIndex(indices);
ribbonGeometry.computeVertexNormals();
geos.push(ribbonGeometry);
});
setGeometryKey(k => k + 1);
return geos;
}, [points, asset.position, asset.rotation]);
useEffect(() => {
if (bezierPoints.length >= 2) {
const start = bezierPoints[0];
const end = bezierPoints[bezierPoints.length - 1];
conveyorDirection.current.copy(end).sub(start).normalize();
const rotation = new THREE.Euler().fromArray(asset.rotation || [0, 0, 0]);
conveyorDirection.current.applyEuler(rotation);
}
}, [bezierPoints, forward, asset.rotation]);
const handleMaterialEnter = (e: CollisionPayload) => {
if (e.other.rigidBody) {
setObjectsOnConveyor(prev => {
const newSet = new Set(prev);
newSet.add(e.other.rigidBody);
return newSet;
});
} }
lastClickTime.current = now;
}
}; };
window.addEventListener('mousedown', handleClick); const handleMaterialExit = (e: CollisionPayload) => {
return () => window.removeEventListener('mousedown', handleClick); if (e.other.rigidBody) {
}, [forward, hoverState]); setObjectsOnConveyor(prev => {
const newSet = new Set(prev);
newSet.delete(e.other.rigidBody);
const bezierPoints = useMemo(() => { return newSet;
const segments = 20; });
const allPoints: THREE.Vector3[] = [];
points.forEach(segment => {
let vectorPoints = segment.map(p => new THREE.Vector3(...p));
if (!forward) vectorPoints.reverse();
for (let group = 0; group + 2 < vectorPoints.length; group += 2) {
const p0 = vectorPoints[group];
const p1 = vectorPoints[group + 1];
const p2 = vectorPoints[group + 2];
for (let i = 0; i <= segments; i++) {
const t = i / segments;
const point = new THREE.Vector3()
.copy(p0)
.multiplyScalar((1 - t) ** 2)
.addScaledVector(p1, 2 * (1 - t) * t)
.addScaledVector(p2, t ** 2);
allPoints.push(point);
} }
} };
});
return allPoints;
}, [points, forward]);
const geometries = useMemo(() => {
const width = 1;
const segments = 20;
const geos: THREE.BufferGeometry[] = [];
points.forEach(segment => {
const vertices: number[] = [];
const indices: number[] = [];
const vectorPoint = segment.map(p => new THREE.Vector3(...p));
if (vectorPoint.length < 3) return;
for (let group = 0; group + 2 < vectorPoint.length; group += 2) {
const p0 = vectorPoint[group];
const p1 = vectorPoint[group + 1];
const p2 = vectorPoint[group + 2];
for (let i = 0; i <= segments; i++) {
const t = i / segments;
const point = new THREE.Vector3()
.copy(p0)
.multiplyScalar((1 - t) ** 2)
.addScaledVector(p1, 2 * (1 - t) * t)
.addScaledVector(p2, t ** 2);
const tangent = new THREE.Vector3()
.copy(p0)
.multiplyScalar(-2 * (1 - t))
.addScaledVector(p1, 2 - 4 * t)
.addScaledVector(p2, 2 * t)
.normalize();
const normal = new THREE.Vector3().crossVectors(tangent, new THREE.Vector3(0, 1, 0)).normalize();
const left = new THREE.Vector3().copy(point).addScaledVector(normal, -width / 2);
const right = new THREE.Vector3().copy(point).addScaledVector(normal, width / 2);
vertices.push(...left.toArray(), ...right.toArray());
}
}
const totalSegments = ((vectorPoint.length - 1) / 2) * segments;
for (let i = 0; i < totalSegments; i++) {
const base = i * 2;
indices.push(base, base + 1, base + 2);
indices.push(base + 1, base + 3, base + 2);
}
const ribbonGeometry = new THREE.BufferGeometry();
ribbonGeometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
ribbonGeometry.setIndex(indices);
ribbonGeometry.computeVertexNormals();
geos.push(ribbonGeometry);
});
setGeometryKey(k => k + 1);
return geos;
}, [points, asset.position, asset.rotation]);
useEffect(() => {
if (bezierPoints.length >= 2) {
const start = bezierPoints[0];
const end = bezierPoints[bezierPoints.length - 1];
conveyorDirection.current.copy(end).sub(start).normalize();
const rotation = new THREE.Euler().fromArray(asset.rotation || [0, 0, 0]);
conveyorDirection.current.applyEuler(rotation);
}
}, [bezierPoints, forward, asset.rotation]);
const handleMaterialEnter = (e: CollisionPayload) => { useFrame(({ clock }) => {
if (e.other.rigidBody) { if (isPaused) return;
setObjectsOnConveyor(prev => {
const newSet = new Set(prev);
newSet.add(e.other.rigidBody);
return newSet;
});
}
};
const handleMaterialExit = (e: CollisionPayload) => { // Physics simulation
if (e.other.rigidBody) { const assetPos = new THREE.Vector3(...(asset.position || [0, 0, 0]));
setObjectsOnConveyor(prev => { const assetRot = new THREE.Euler(...(asset.rotation || [0, 0, 0]));
const newSet = new Set(prev); const assetQuat = new THREE.Quaternion().setFromEuler(assetRot);
newSet.delete(e.other.rigidBody); const inverseQuat = assetQuat.clone().invert();
return newSet;
});
}
};
objectsOnConveyor.forEach(rigidBody => {
const worldPos = new THREE.Vector3().copy(rigidBody.translation());
const localPos = worldPos.clone().sub(assetPos).applyQuaternion(inverseQuat);
useFrame(({ clock }) => { let closestIndex = 0;
if (isPaused) return; let minDist = Infinity;
for (let i = 0; i < bezierPoints.length; i++) {
// Physics simulation const dist = bezierPoints[i].distanceToSquared(localPos);
const assetPos = new THREE.Vector3(...(asset.position || [0, 0, 0])); if (dist < minDist) {
const assetRot = new THREE.Euler(...(asset.rotation || [0, 0, 0])); minDist = dist;
const assetQuat = new THREE.Quaternion().setFromEuler(assetRot); closestIndex = i;
const inverseQuat = assetQuat.clone().invert(); }
objectsOnConveyor.forEach(rigidBody => {
const worldPos = new THREE.Vector3().copy(rigidBody.translation());
const localPos = worldPos.clone().sub(assetPos).applyQuaternion(inverseQuat);
let closestIndex = 0;
let minDist = Infinity;
for (let i = 0; i < bezierPoints.length; i++) {
const dist = bezierPoints[i].distanceToSquared(localPos);
if (dist < minDist) {
minDist = dist;
closestIndex = i;
}
}
const point = bezierPoints[closestIndex];
const prev = bezierPoints[closestIndex - 1] || point;
const next = bezierPoints[closestIndex + 1] || point;
const tangent = new THREE.Vector3().subVectors(next, prev).normalize();
const side = new THREE.Vector3().crossVectors(tangent, new THREE.Vector3(0, 1, 0)).normalize();
const relative = new THREE.Vector3().subVectors(localPos, point);
const sideOffset = relative.dot(side);
const centeringForce = side.clone().multiplyScalar(-sideOffset * 10);
const forwardForce = tangent.clone().multiplyScalar(conveyorSpeed);
const totalForce = forwardForce.add(centeringForce).applyQuaternion(assetQuat);
rigidBody.setAngvel({ x: 0, y: 0, z: 0 }, true);
rigidBody.setLinvel(totalForce, true);
});
// Arrow animations
if (showDirection && arrowRefs.current.length > 0) {
const elapsedTime = clock.getElapsedTime();
arrowRefs.current.forEach((arrowGroup, index) => {
// Pulse animation
const pulseScale = 0.9 + 0.1 * Math.sin(elapsedTime * 5 + index * 0.5);
arrowGroup.scale.setScalar(pulseScale);
// Flow animation (color intensity)
const intensity = 0.7 + 0.3 * Math.sin(elapsedTime * 3 + index * 0.3);
arrowGroup.children.forEach(child => {
if (child instanceof THREE.Mesh) {
const material = child.material as THREE.MeshBasicMaterial;
if (forward) {
material.color.setRGB(0, intensity, 0);
} else {
material.color.setRGB(intensity, 0, 0);
} }
}
const point = bezierPoints[closestIndex];
const prev = bezierPoints[closestIndex - 1] || point;
const next = bezierPoints[closestIndex + 1] || point;
const tangent = new THREE.Vector3().subVectors(next, prev).normalize();
const side = new THREE.Vector3().crossVectors(tangent, new THREE.Vector3(0, 1, 0)).normalize();
const relative = new THREE.Vector3().subVectors(localPos, point);
const sideOffset = relative.dot(side);
const centeringForce = side.clone().multiplyScalar(-sideOffset * 10);
const forwardForce = tangent.clone().multiplyScalar(conveyorSpeed);
const totalForce = forwardForce.add(centeringForce).applyQuaternion(assetQuat);
rigidBody.setAngvel({ x: 0, y: 0, z: 0 }, true);
rigidBody.setLinvel(totalForce, true);
}); });
});
}
});
// Arrow animations
if (showDirection && arrowRefs.current.length > 0) {
const elapsedTime = clock.getElapsedTime();
arrowRefs.current.forEach((arrowGroup, index) => {
// Pulse animation
const pulseScale = 0.9 + 0.1 * Math.sin(elapsedTime * 5 + index * 0.5);
arrowGroup.scale.setScalar(pulseScale);
// Create curved direction indicators // Flow animation (color intensity)
const directionArrows = useMemo(() => { const intensity = 0.7 + 0.3 * Math.sin(elapsedTime * 3 + index * 0.3);
if (!showDirection) return null; arrowGroup.children.forEach(child => {
if (child instanceof THREE.Mesh) {
const arrows: THREE.Group[] = []; const material = child.material as THREE.MeshBasicMaterial;
const arrowHeight = 0.2; if (forward) {
const arrowRadius = 0.05; material.color.setRGB(0, intensity, 0);
const segments = 8; // Fewer arrows for curved conveyors } else {
material.color.setRGB(intensity, 0, 0);
points.forEach(segment => { }
let vectorPoints = segment.map(p => new THREE.Vector3(...p)); }
if (!forward) vectorPoints.reverse(); });
});
for (let group = 0; group + 2 < vectorPoints.length; group += 2) {
const p0 = vectorPoints[group];
const p1 = vectorPoints[group + 1];
const p2 = vectorPoints[group + 2];
for (let i = 0; i <= segments; i++) {
const t = i / segments;
const point = new THREE.Vector3()
.copy(p0)
.multiplyScalar((1 - t) ** 2)
.addScaledVector(p1, 2 * (1 - t) * t)
.addScaledVector(p2, t ** 2);
const tangent = new THREE.Vector3()
.copy(p0)
.multiplyScalar(-2 * (1 - t))
.addScaledVector(p1, 2 - 4 * t)
.addScaledVector(p2, 2 * t)
.normalize();
// Create arrow group
const arrowGroup = new THREE.Group();
// Arrow shaft (cylinder)
const shaftLength = arrowHeight * 0.7;
const shaftGeometry = new THREE.CylinderGeometry(arrowRadius * 0.3, arrowRadius * 0.3, shaftLength, 8);
const shaftMaterial = new THREE.MeshBasicMaterial({
color: forward ? 0x00ff00 : 0xff0000
});
const shaft = new THREE.Mesh(shaftGeometry, shaftMaterial);
shaft.position.y = shaftLength / 2;
shaft.rotation.x = Math.PI / 2;
// Arrow head (cone)
const headGeometry = new THREE.ConeGeometry(arrowRadius, arrowHeight * 0.3, 8);
const headMaterial = new THREE.MeshBasicMaterial({
color: forward ? 0x00ff00 : 0xff0000
});
const head = new THREE.Mesh(headGeometry, headMaterial);
head.position.y = shaftLength;
// Position and orient the entire arrow
arrowGroup.add(shaft);
arrowGroup.add(head);
arrowGroup.position.copy(point);
arrowGroup.position.y += 0.1; // Slightly above conveyor
arrowGroup.quaternion.setFromUnitVectors(
new THREE.Vector3(0, 1, 0),
new THREE.Vector3(tangent.x, 0.1, tangent.z)
);
arrows.push(arrowGroup);
} }
}
}); });
arrowRefs.current = arrows;
return arrows;
}, [points, showDirection, forward]);
return ( // Create curved direction indicators
<group const directionArrows = useMemo(() => {
onPointerOver={() => { if (!showDirection) return null;
setShowDirection(true);
setHoverState(true); const arrows: THREE.Group[] = [];
}} const arrowHeight = 0.2;
onPointerOut={() => { const arrowRadius = 0.05;
setShowDirection(false); const segments = 8; // Fewer arrows for curved conveyors
setHoverState(false);
}} points.forEach(segment => {
> let vectorPoints = segment.map(p => new THREE.Vector3(...p));
{/* Conveyor surface */} if (!forward) vectorPoints.reverse();
{geometries.length > 0 && (
<RigidBody for (let group = 0; group + 2 < vectorPoints.length; group += 2) {
key={geometryKey} const p0 = vectorPoints[group];
ref={conveyorRef} const p1 = vectorPoints[group + 1];
type="fixed" const p2 = vectorPoints[group + 2];
position={[0, 0.001, 0]}
userData={{ isConveyor: true }} for (let i = 0; i <= segments; i++) {
onCollisionEnter={handleMaterialEnter} const t = i / segments;
onCollisionExit={handleMaterialExit} const point = new THREE.Vector3()
colliders="trimesh" .copy(p0)
.multiplyScalar((1 - t) ** 2)
.addScaledVector(p1, 2 * (1 - t) * t)
.addScaledVector(p2, t ** 2);
const tangent = new THREE.Vector3()
.copy(p0)
.multiplyScalar(-2 * (1 - t))
.addScaledVector(p1, 2 - 4 * t)
.addScaledVector(p2, 2 * t)
.normalize();
// Create arrow group
const arrowGroup = new THREE.Group();
// Arrow shaft (cylinder)
const shaftLength = arrowHeight * 0.7;
const shaftGeometry = new THREE.CylinderGeometry(arrowRadius * 0.3, arrowRadius * 0.3, shaftLength, 8);
const shaftMaterial = new THREE.MeshBasicMaterial({
color: forward ? 0x00ff00 : 0xff0000
});
const shaft = new THREE.Mesh(shaftGeometry, shaftMaterial);
shaft.position.y = shaftLength / 2;
shaft.rotation.x = Math.PI / 2;
// Arrow head (cone)
const headGeometry = new THREE.ConeGeometry(arrowRadius, arrowHeight * 0.3, 8);
const headMaterial = new THREE.MeshBasicMaterial({
color: forward ? 0x00ff00 : 0xff0000
});
const head = new THREE.Mesh(headGeometry, headMaterial);
head.position.y = shaftLength;
// Position and orient the entire arrow
arrowGroup.add(shaft);
arrowGroup.add(head);
arrowGroup.position.copy(point);
arrowGroup.position.y += 0.1; // Slightly above conveyor
arrowGroup.quaternion.setFromUnitVectors(
new THREE.Vector3(0, 1, 0),
new THREE.Vector3(tangent.x, 0.1, tangent.z)
);
arrows.push(arrowGroup);
}
}
});
arrowRefs.current = arrows;
return arrows;
}, [points, showDirection, forward]);
return (
<group
onPointerOver={() => {
setShowDirection(true);
setHoverState(true);
}}
onPointerOut={() => {
setShowDirection(false);
setHoverState(false);
}}
> >
{geometries.map((geometry, index) => ( {/* Conveyor surface */}
<mesh key={index} geometry={geometry}> {geometries.length > 0 && (
<meshStandardMaterial <RigidBody
color={forward ? "#64b5f6" : "#f48fb1"} key={geometryKey}
side={THREE.DoubleSide} ref={conveyorRef}
transparent type="fixed"
opacity={0.7} position={[0, 0.001, 0]}
/> userData={{ isConveyor: true }}
</mesh> onCollisionEnter={handleMaterialEnter}
))} onCollisionExit={handleMaterialExit}
</RigidBody> colliders="trimesh"
)} >
{geometries.map((geometry, index) => (
<mesh key={index} geometry={geometry}>
<meshStandardMaterial
color={forward ? "#64b5f6" : "#f48fb1"}
side={THREE.DoubleSide}
transparent
opacity={0.7}
visible={false}
/>
</mesh>
))}
</RigidBody>
)}
{/* Direction indicators */} {/* Direction indicators */}
{showDirection && directionArrows?.map((arrow, i) => ( {showDirection && directionArrows?.map((arrow, i) => (
<primitive key={`arrow-${i}`} object={arrow} /> <primitive key={`arrow-${i}`} object={arrow} />
))} ))}
{/* Hover highlight */} {/* Hover highlight */}
{hoverState && ( {hoverState && (
<group> <group>
{geometries.map((geometry, index) => ( {geometries.map((geometry, index) => (
<mesh <mesh
key={`highlight-${index}`} key={`highlight-${index}`}
geometry={geometry} geometry={geometry}
position={[0, 0.002, 0]} // Slightly above conveyor position={[0, 0.002, 0]} // Slightly above conveyor
> // visible={false}
<meshBasicMaterial >
color={forward ? "#00ff0044" : "#ff000044"} <meshBasicMaterial
transparent color={forward ? "#00ff0044" : "#ff000044"}
opacity={0.3} transparent
/> opacity={0.3}
</mesh> />
))} </mesh>
))}
</group>
)}
</group> </group>
)} );
</group>
);
} }
export default CurvedConveyorCollider; export default CurvedConveyorCollider;

4
app/src/modules/scene/physics/conveyor/types/normalConveyorCollider.tsx
View File

@@ -20,7 +20,7 @@ function NormalConveyorCollider({ points, boundingBox, asset, forward, isPaused,
const conveyorSpeed = 2; const conveyorSpeed = 2;
const lastClickTime = useRef(0); const lastClickTime = useRef(0);
const [hoverState, setHoverState] = useState(false); const [hoverState, setHoverState] = useState(false);
const[localForward,setLocalForward]=useState() const [localForward, setLocalForward] = useState()
useEffect(() => { useEffect(() => {
const handleClick = (e: MouseEvent) => { const handleClick = (e: MouseEvent) => {
@@ -215,6 +215,7 @@ function NormalConveyorCollider({ points, boundingBox, asset, forward, isPaused,
side={THREE.DoubleSide} side={THREE.DoubleSide}
transparent transparent
opacity={0.5} opacity={0.5}
visible={false}
/> />
</mesh> </mesh>
</RigidBody> </RigidBody>
@@ -231,6 +232,7 @@ function NormalConveyorCollider({ points, boundingBox, asset, forward, isPaused,
key={`highlight-${index}`} key={`highlight-${index}`}
geometry={geometry} geometry={geometry}
position={[0, 0.002, 0]} position={[0, 0.002, 0]}
// visible={false}
> >
<meshBasicMaterial <meshBasicMaterial
color={forward ? "#00ff0044" : "#ff000044"} color={forward ? "#00ff0044" : "#ff000044"}

6
app/src/modules/scene/physics/conveyor/types/ySplitConveyorCollider.tsx
View File

@@ -26,8 +26,8 @@ function YSplitConveyorCollider({ points, boundingBox, asset, forward, isPaused,
if (e.button === 2) { if (e.button === 2) {
const now = Date.now(); const now = Date.now();
if (now - lastClickTime.current < 300) { if (now - lastClickTime.current < 300) {
if (onDirectionChange) { if (onDirectionChange) {
console.log('forwardySplit: ', forward); console.log('forwardySplit: ', forward);
onDirectionChange(!forward); onDirectionChange(!forward);
} }
} }
@@ -214,6 +214,7 @@ function YSplitConveyorCollider({ points, boundingBox, asset, forward, isPaused,
side={THREE.DoubleSide} side={THREE.DoubleSide}
transparent transparent
opacity={0.5} opacity={0.5}
visible={false}
/> />
</mesh> </mesh>
</RigidBody> </RigidBody>
@@ -230,6 +231,7 @@ function YSplitConveyorCollider({ points, boundingBox, asset, forward, isPaused,
key={`highlight-${index}`} key={`highlight-${index}`}
geometry={geometry} geometry={geometry}
position={[0, 0.002, 0]} position={[0, 0.002, 0]}
// visible={false}
> >
<meshBasicMaterial <meshBasicMaterial
color={forward ? "green" : "red"} color={forward ? "green" : "red"}

20
app/src/modules/scene/scene.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useMemo } from "react"; import { useEffect, useMemo, useState } from "react";
import { Canvas } from "@react-three/fiber"; import { Canvas } from "@react-three/fiber";
import { Physics } from "@react-three/rapier"; import { Physics } from "@react-three/rapier";
import { Color, SRGBColorSpace } from "three"; import { Color, SRGBColorSpace } from "three";
@@ -8,7 +8,6 @@ import Builder from "../builder/builder";
import Visualization from "../visualization/visualization"; import Visualization from "../visualization/visualization";
import Setup from "./setup/setup"; import Setup from "./setup/setup";
import Simulation from "../simulation/simulation"; import Simulation from "../simulation/simulation";
import PhysicsSimulator from "./physics/physicsSimulator";
import Collaboration from "../collaboration/collaboration"; import Collaboration from "../collaboration/collaboration";
import useModuleStore from "../../store/useModuleStore"; import useModuleStore from "../../store/useModuleStore";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
@@ -19,6 +18,7 @@ import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
import { compressImage } from "../../utils/compressImage"; import { compressImage } from "../../utils/compressImage";
export default function Scene({ layout }: { readonly layout: "Main Layout" | "Comparison Layout"; }) { export default function Scene({ layout }: { readonly layout: "Main Layout" | "Comparison Layout"; }) {
const [visible, setVisible] = useState(false);
const map = useMemo(() => [ const map = useMemo(() => [
{ name: "forward", keys: ["ArrowUp", "w", "W"] }, { name: "forward", keys: ["ArrowUp", "w", "W"] },
{ name: "backward", keys: ["ArrowDown", "s", "S"] }, { name: "backward", keys: ["ArrowDown", "s", "S"] },
@@ -58,6 +58,18 @@ export default function Scene({ layout }: { readonly layout: "Main Layout" | "Co
// eslint-disable-next-line // eslint-disable-next-line
}, [activeModule, assets, loadingProgress]); }, [activeModule, assets, loadingProgress]);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "F1") {
event.preventDefault();
setVisible(prev => !prev);
}
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, []);
return ( return (
<KeyboardControls map={map}> <KeyboardControls map={map}>
<Canvas <Canvas
@@ -72,11 +84,9 @@ export default function Scene({ layout }: { readonly layout: "Main Layout" | "Co
> >
<Setup /> <Setup />
<Collaboration /> <Collaboration />
<Physics gravity={[0, -9.81, 0]} allowedLinearError={50} numSolverIterations={50} debug > <Physics gravity={[0, -9.81, 0]} allowedLinearError={50} numSolverIterations={50} debug={visible} >
<Builder /> <Builder />
{/* <Physics gravity={[0, -9.81, 0]} allowedLinearError={50} numSolverIterations={50} > */}
<Simulation /> <Simulation />
<PhysicsSimulator />
</Physics> </Physics>
<Visualization /> <Visualization />
</Canvas> </Canvas>

3
app/src/modules/simulation/simulation.tsx
View File

@@ -13,6 +13,7 @@ import Products from './products/products';
import Trigger from './triggers/trigger'; import Trigger from './triggers/trigger';
import useModuleStore from '../../store/useModuleStore'; import useModuleStore from '../../store/useModuleStore';
import SimulationAnalysis from './analysis/simulationAnalysis'; import SimulationAnalysis from './analysis/simulationAnalysis';
import PhysicsSimulator from '../scene/physics/physicsSimulator';
import { useSceneContext } from '../scene/sceneContext'; import { useSceneContext } from '../scene/sceneContext';
function Simulation() { function Simulation() {
@@ -62,6 +63,8 @@ function Simulation() {
<SimulationAnalysis /> <SimulationAnalysis />
<PhysicsSimulator />
</> </>
} }