hazem/yslootahrobotics
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance UI components and update Instagram post data
CI/CD / test-and-build (push) Waiting to run
Details
CI/CD / deploy (push) Blocked by required conditions
Details

Browse Source
This commit is contained in:
Najjar\NajjarV02
2026-05-21 17:08:24 +04:00
parent e7fde29a21
commit fb41977b18
6 changed files with 90 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/RobotCanvas.tsx
+37 -10
View File
@@ -49,15 +49,42 @@ function SceneContent({ onCapture }: { onCapture: (gl: WebGLRenderer, scene: Sce
return (
<>
<SceneCapture onCapture={onCapture} />
<Environment preset="studio" />
<ambientLight intensity={1.1} />
<directionalLight position={[5, 5, 5]} intensity={2.4} color="#ffffff" castShadow shadow-mapSize={[1024, 1024]} />
<directionalLight position={[-4, 3, 2]} intensity={1.3} color="#dfeaff" />
<directionalLight position={[0, 3, -5]} intensity={1.1} color="#A6B2D8" />
<spotLight position={[0, 8, 0]} intensity={1.6} angle={0.6} penumbra={0.5} color="#ffffff" />
<directionalLight position={[0, 2, 5]} intensity={1.1} color="#ffffff" />
<Environment preset="studio" environmentIntensity={2.2} />
<ambientLight intensity={3.4} />
<hemisphereLight args={['#ffffff', '#3a4a78', 2.6]} />
{/* Key — front-right, strong white */}
<directionalLight position={[5, 5, 5]} intensity={6.0} color="#ffffff" castShadow shadow-mapSize={[1024, 1024]} />
{/* Fill — front-left, cool tint */}
<directionalLight position={[-4, 3, 2]} intensity={4.0} color="#e8f0ff" />
{/* Rim — behind */}
<directionalLight position={[0, 3, -5]} intensity={2.8} color="#A6B2D8" />
{/* Top spotlight */}
<spotLight position={[0, 8, 0]} intensity={4.5} angle={0.8} penumbra={0.45} color="#ffffff" />
{/* Front fill — direct face/torso */}
<directionalLight position={[0, 1.5, 6]} intensity={4.0} color="#ffffff" />
{/* Face spotlight — soft direct head light */}
<spotLight position={[0, 2.2, 4.2]} intensity={3.0} angle={0.55} penumbra={0.6} color="#ffffff" />
{/* Bottom fill — lift the legs */}
<directionalLight position={[0, -1, 4]} intensity={1.4} color="#dfe8ff" />
{/* Side accents */}
<pointLight position={[3, 1.5, 3]} intensity={2.4} color="#ffffff" distance={10} />
<pointLight position={[-3, 1.5, 3]} intensity={2.4} color="#dfe8ff" distance={10} />
{/* Back side accents — define silhouette */}
<pointLight position={[2.5, 2.5, -2]} intensity={1.6} color="#b0c4ff" distance={10} />
<pointLight position={[-2.5, 2.5, -2]} intensity={1.6} color="#b0c4ff" distance={10} />
<RobotModel />
<OrbitControls enablePan enableZoom enableRotate minDistance={2} maxDistance={10} minPolarAngle={0} maxPolarAngle={Math.PI} dampingFactor={0.05} enableDamping />
<OrbitControls
target={[0, 0.5, 0]}
enablePan
enableZoom
enableRotate
minDistance={2}
maxDistance={10}
minPolarAngle={0}
maxPolarAngle={Math.PI}
dampingFactor={0.05}
enableDamping
/>
<ContactShadows position={[0, -1, 0]} opacity={0.55} scale={10} blur={2.4} far={4} resolution={256} color="#000000" />
</>
);
@@ -136,11 +163,11 @@ export function RobotCanvas() {
<div style={{ position: 'relative', width: '100%', height: '100%' }}>
<Canvas
dpr={[1, 1.5]}
camera={{ position: [0, 1, 5], fov: 50 }}
camera={{ position: [0, 0.7, 4.6], fov: 42 }}
gl={{ antialias: true, powerPreference: 'high-performance' }}
style={{
background:
'radial-gradient(ellipse 38% 18% at 50% 80%, rgba(200, 210, 240, 0.22), transparent 70%), radial-gradient(ellipse 55% 55% at 50% 50%, rgba(58, 85, 196, 0.22), transparent 65%), linear-gradient(180deg, #0e0e16 0%, #060609 100%)',
'radial-gradient(ellipse 45% 22% at 50% 82%, rgba(220, 228, 245, 0.32), transparent 70%), radial-gradient(ellipse 70% 65% at 50% 45%, rgba(80, 110, 200, 0.38), transparent 65%), linear-gradient(180deg, #1c1d2c 0%, #0f1018 60%, #0a0b13 100%)',
}}
>
<Suspense fallback={<Loader />}>