malty/ca-grow-ops-manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: upgrade 3d styling with environment, shadows, and physical materials
Some checks are pending
Deploy to Production / deploy (push) Waiting to run
Details
Test / backend-test (push) Waiting to run
Details
Test / frontend-test (push) Waiting to run
Details

Browse source
This commit is contained in:
fullsizemalt 2025-12-17 23:11:12 -08:00
parent 9ac0261a17
commit fa67f2d271
1 changed files with 27 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
frontend/src/pages/Facility3DViewerPage.tsx
View file

@ -1,6 +1,6 @@
import { useEffect, useState, Suspense, useMemo, Component, ReactNode, useRef } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { Text, Instances, Instance, Html, CameraControls } from '@react-three/drei';
import { Text, Instances, Instance, Html, CameraControls, Environment, ContactShadows } from '@react-three/drei';
import * as THREE from 'three';
import { layoutApi, Floor3DData } from '../lib/layoutApi';
import { Loader2, ArrowLeft, Maximize, MousePointer2, Layers, Thermometer, Droplets, Activity, Leaf } from 'lucide-react';
@ -149,11 +149,11 @@ function PlantInstances({ positions, onPlantClick, visMode }: {
</Instances>
)}
{/* Empty Slots */}
{/* Empty Slots - Refined */}
{emptySlots.length > 0 && visMode === 'STANDARD' && (
<Instances range={emptySlots.length}>
<cylinderGeometry args={[0.05, 0.05, 0.1, 8]} />
<meshStandardMaterial color={COLORS.EMPTY_SLOT} opacity={0.3} transparent />
<meshStandardMaterial color="#4b5563" roughness={0.8} />
{emptySlots.map((pos, i) => (
<Instance
key={pos.id || i}
@ -251,12 +251,13 @@ function FacilityScene({ data, onSelectPlant, targetView, setControls, visMode }
<mesh
rotation={[-Math.PI / 2, 0, 0]}
position={[room.width / 2, 0, room.height / 2]}
receiveShadow
>
<planeGeometry args={[room.width, room.height]} />
<meshStandardMaterial
color={floorColor}
metalness={0.2}
roughness={0.8}
roughness={0.9} // Concrete-like
metalness={0.1}
transparent={visMode !== 'STANDARD'}
opacity={visMode !== 'STANDARD' ? 0.8 : 1}
/>
@ -306,9 +307,11 @@ function FacilityScene({ data, onSelectPlant, targetView, setControls, visMode }
section.posY + (section.height / 2)
]}
rotation={[-Math.PI / 2, 0, 0]}
castShadow
receiveShadow
>
<planeGeometry args={[section.width, section.height]} />
<meshStandardMaterial color="#374151" transparent opacity={0.5} side={THREE.DoubleSide} />
<meshStandardMaterial color="#64748b" roughness={0.2} metalness={0.8} side={THREE.DoubleSide} />
</mesh>
))}
@ -361,14 +364,29 @@ function FacilityScene({ data, onSelectPlant, targetView, setControls, visMode }
return (
<>
<ambientLight intensity={1.5} />
<pointLight position={[20, 30, 20]} intensity={2} />
<directionalLight position={[-10, 50, -10]} intensity={1} castShadow />
<Environment preset="city" background={false} />
<ambientLight intensity={0.5} />
<directionalLight
position={[-10, 50, -10]}
intensity={1}
castShadow
shadow-mapSize={[2048, 2048]}
/>
<group position={[-data.floor.width / 2, 0, -data.floor.height / 2]}>
{roomMeshes}
</group>
<ContactShadows
position={[0, -0.01, 0]}
opacity={0.4}
scale={100}
blur={2.5}
far={10}
resolution={512}
color="#000000"
/>
<CameraControls
ref={controlsRef}
minDistance={5}
@ -378,9 +396,6 @@ function FacilityScene({ data, onSelectPlant, targetView, setControls, visMode }
infinityDolly={false}
makeDefault
/>
<gridHelper args={[200, 100, 0x444444, 0x111111]} position={[0, -0.1, 0]} />
<axesHelper args={[5]} />
</>
);
}