Spaces:
Running
Running
| /** 3D-Viewer v2: Raumhülle + Plan als Möbel-Kompositionen, jetzt mit | |
| * Ansichts-Presets, zwei Begehungsmodi (Orbit/Begehung), direkter Objekt- | |
| * Interaktion (Drag auf Bodenebene, Doppelklick = +90°), Ebenen-Toggles und | |
| * wählbaren Oberflächen (Klick auf Boden/Wand → Variantenwahl in der Karte). | |
| * | |
| * Reine Rechenlogik (Preset-Posen, Begehungs-Schrittvektor, Raum-BBox) lebt in | |
| * `viewer3d-logik.ts` (getestet); hier bleibt nur das r3f-Rendering/Verdrahten. | |
| * Box-Platzhalter-Prinzip und die dominierende Norm-Ampel sind unverändert. | |
| */ | |
| import { ContactShadows, Environment, Lightformer, OrbitControls } from "@react-three/drei"; | |
| import { Canvas, useFrame, useThree, type ThreeEvent } from "@react-three/fiber"; | |
| import { useEffect, useMemo, useRef, useState, type ComponentRef, type CSSProperties } from "react"; | |
| import { ACESFilmicToneMapping, Euler, Shape, Vector3, type Camera } from "three"; | |
| import type { DressingItem, KatalogItem, Placement, Plan, Room } from "./api"; | |
| import { DressingLayer3D } from "./dressing3d.tsx"; | |
| import { loeseFarbSlug } from "./farben"; | |
| import { materialFarbe, Moebel3D } from "./moebel3d.tsx"; | |
| import { | |
| leiteOberflaechen, | |
| loeseBodenSpez, | |
| loeseWandZonen, | |
| wendeVariantenAn, | |
| type BodenSpez, | |
| type FlaechenKonzept, | |
| type WandZonen, | |
| } from "./oberflaechen"; | |
| import type { OberflaechenWahl } from "./oberflaechen"; | |
| import { bodenTextur, WandMitOeffnungen } from "./raum3d.tsx"; | |
| import type { WandOeffnung } from "./raum3d"; | |
| import type { Stilprofil } from "./Stil"; | |
| import { THEME } from "./theme"; | |
| import { | |
| AUGENHOEHE, | |
| begehungStart, | |
| bewegungsDelta, | |
| blickRichtung, | |
| presetKamera, | |
| raumBBox, | |
| RAUMHOEHE_FALLBACK, | |
| type Ansichtspreset, | |
| type Begehungsmodus, | |
| } from "./viewer3d-logik"; | |
| const FARBE_VERLETZT = "#c0392b"; | |
| const FARBE_KNAPP = "#e67e22"; | |
| const FARBE_GEWAEHLT = THEME.orange; | |
| const FARBE_GESPERRT = "#7a7a7a"; | |
| /** Auswählbare Fläche der Raumhülle (Boden bzw. Wände als Ganzes). */ | |
| export type FlaechenWahl = "boden" | "wand"; | |
| type Status = "verletzt" | "knapp"; | |
| function Boden({ | |
| room, | |
| boden, | |
| gewaehlt, | |
| onFlaeche, | |
| }: { | |
| room: Room; | |
| boden: BodenSpez; | |
| gewaehlt: boolean; | |
| onFlaeche?: (f: FlaechenWahl, e: ThreeEvent<MouseEvent>) => void; | |
| }) { | |
| const shape = new Shape(); | |
| const poly = room.shell.floor.polygon; | |
| const textur = useMemo( | |
| () => bodenTextur(boden), | |
| [boden.muster, boden.grundfarbe, boden.fugenfarbe, boden.masse_m], | |
| ); | |
| const start = poly[0]; | |
| if (!start) return null; | |
| shape.moveTo(start[0], start[1]); | |
| for (const p of poly.slice(1)) shape.lineTo(p[0], p[1]); | |
| shape.closePath(); | |
| return ( | |
| <mesh | |
| rotation={[Math.PI / 2, 0, 0]} | |
| position={[0, 0, 0]} | |
| onClick={onFlaeche ? (e) => onFlaeche("boden", e) : undefined} | |
| > | |
| <shapeGeometry args={[shape]} /> | |
| <meshStandardMaterial | |
| color={textur ? "#ffffff" : boden.grundfarbe} | |
| map={textur ?? undefined} | |
| side={2} | |
| emissive={gewaehlt ? FARBE_GEWAEHLT : "#000000"} | |
| emissiveIntensity={gewaehlt ? 0.22 : 0} | |
| /> | |
| </mesh> | |
| ); | |
| } | |
| /** Gewählte Wandfläche solid einfärben (Highlight) – Muster aus, damit das Orange | |
| * auch auf texturierten Zonen sichtbar bleibt. */ | |
| const HIGHLIGHT: WandZonen = { | |
| basis: { muster: "uni", farbe: FARBE_GEWAEHLT, fugenfarbe: FARBE_GEWAEHLT, masse_m: 0.3 }, | |
| zone: null, | |
| }; | |
| // Rein defensiver Fallback (loeseWandZonen liefert immer genau `wandAnzahl` | |
| // Einträge – dieser greift nur, falls doch ein Index fehlt). | |
| const NEUTRAL: WandZonen = { | |
| basis: { muster: "uni", farbe: "#d8d2c4", fugenfarbe: "#9b9689", masse_m: 0.3 }, | |
| zone: null, | |
| }; | |
| function Waende({ | |
| room, | |
| zonen, | |
| sichtbar, | |
| gewaehlt, | |
| onFlaeche, | |
| }: { | |
| room: Room; | |
| /** Zonen je Wand, Index = Position in room.shell.walls (aus loeseWandZonen). */ | |
| zonen: WandZonen[]; | |
| sichtbar: boolean; | |
| gewaehlt: boolean; | |
| onFlaeche?: (f: FlaechenWahl, e: ThreeEvent<MouseEvent>) => void; | |
| }) { | |
| const proWand = new Map<string, WandOeffnung[]>(); | |
| for (const o of room.openings) { | |
| const eintrag = o as (typeof room.openings)[number] & { height?: number }; | |
| const liste = proWand.get(eintrag.hostWall) ?? []; | |
| liste.push({ | |
| type: eintrag.type, | |
| offset: eintrag.offset, | |
| width: eintrag.width, | |
| height: eintrag.height ?? (eintrag.type === "door" ? 2.0 : 1.2), | |
| sill: eintrag.sill, | |
| }); | |
| proWand.set(eintrag.hostWall, liste); | |
| } | |
| if (!sichtbar) return null; | |
| return ( | |
| <group onClick={onFlaeche ? (e) => onFlaeche("wand", e) : undefined}> | |
| {room.shell.walls.map((w, i) => { | |
| const z = gewaehlt ? HIGHLIGHT : (zonen[i] ?? NEUTRAL); | |
| return ( | |
| <WandMitOeffnungen | |
| key={w.id} | |
| wand={w as Parameters<typeof WandMitOeffnungen>[0]["wand"]} | |
| oeffnungen={proWand.get(w.id) ?? []} | |
| basis={z.basis} | |
| zone={z.zone} | |
| /> | |
| ); | |
| })} | |
| </group> | |
| ); | |
| } | |
| function PlacementBox({ | |
| placement, | |
| item, | |
| gewaehlt, | |
| status, | |
| ampelAn, | |
| manuellFarbe, | |
| onClick, | |
| }: { | |
| placement: Placement; | |
| item: KatalogItem; | |
| gewaehlt: boolean; | |
| status: Status | undefined; | |
| ampelAn: boolean; | |
| /** Manueller Farb-Override (Slug) aus dem UI-State (pro placementId). */ | |
| manuellFarbe?: string; | |
| onClick: () => void; | |
| }) { | |
| const { w, d, h } = item.masse; | |
| const y = (placement.mountHeight ?? 0) + h / 2; | |
| // Ampel dominiert: nur wenn KEIN Status-/Auswahl-Zustand aktiv ist, zeigt das | |
| // Möbel seine Objektfarbe. | |
| const zeigtMaterial = !( | |
| gewaehlt || | |
| (ampelAn && (status === "verletzt" || status === "knapp" || placement.locked)) | |
| ); | |
| const farbe = gewaehlt | |
| ? FARBE_GEWAEHLT | |
| : ampelAn && status === "verletzt" | |
| ? FARBE_VERLETZT | |
| : ampelAn && status === "knapp" | |
| ? FARBE_KNAPP | |
| : ampelAn && placement.locked | |
| ? FARBE_GESPERRT | |
| : materialFarbe(item.funktionsTyp); | |
| // Farbvariante MANUELL > KI (placement.farbe) > Default (erste Variante) – | |
| // aber nur solange die Ampel nicht ohnehin eine Statusfarbe zeigt (Norm/Auswahl | |
| // dominiert; Farben sind keine Norm, dürfen den Status aber nicht verdecken). | |
| const farbSlug = zeigtMaterial | |
| ? loeseFarbSlug(item.farbVarianten, placement.farbe, manuellFarbe) | |
| : undefined; | |
| // 3D ist reine Ansicht/Begehung: Klick wählt aus (öffnet die Produktkarte), | |
| // aber Möbel werden hier NICHT mehr verschoben/gedreht – das Bearbeiten läuft | |
| // über den 2D-Grundriss (Bryan 2026-07-07). | |
| return ( | |
| <group | |
| position={[placement.pose.pos[0], y, placement.pose.pos[1]]} | |
| rotation={[0, (-placement.pose.yawDeg * Math.PI) / 180, 0]} | |
| onClick={(e) => { | |
| e.stopPropagation(); | |
| onClick(); | |
| }} | |
| > | |
| <Moebel3D | |
| funktionsTyp={item.funktionsTyp} | |
| modell3d={item.modell3d} | |
| w={w} | |
| d={d} | |
| h={h} | |
| farbe={farbe} | |
| farbSlug={farbSlug} | |
| /> | |
| </group> | |
| ); | |
| } | |
| /** Orbit-/Preset-Kamerasteuerung: setzt Kamera + OrbitControls-Ziel bei jedem | |
| * Preset-Wechsel neu (animationsfrei, Bryan ok). */ | |
| function KameraSteuerung({ | |
| preset, | |
| bboxKey, | |
| pose, | |
| }: { | |
| preset: Ansichtspreset; | |
| bboxKey: string; | |
| pose: ReturnType<typeof presetKamera>; | |
| }) { | |
| const ref = useRef<ComponentRef<typeof OrbitControls>>(null); | |
| const { camera } = useThree(); | |
| useEffect(() => { | |
| camera.position.set(...pose.position); | |
| const c = ref.current; | |
| if (c) { | |
| c.target.set(...pose.target); | |
| c.update(); | |
| } else { | |
| camera.lookAt(...pose.target); | |
| } | |
| // preset + bboxKey als Auslöser: nur bei Preset-/Raumwechsel neu setzen. | |
| }, [preset, bboxKey]); | |
| return <OrbitControls ref={ref} makeDefault maxPolarAngle={Math.PI / 2.05} />; | |
| } | |
| /** First-Person-Begehung: Drag = umsehen (Yaw/Pitch), WASD/Pfeile = bewegen, | |
| * Doppeltipp = ein Schritt vorwärts (Touch). Bodenhöhe (Augenhöhe) bleibt fix. | |
| * Kollision mit Wänden ist bewusst NICHT modelliert (POC, Bryan). */ | |
| function Begehung({ start }: { start: ReturnType<typeof begehungStart> }) { | |
| const { camera, gl } = useThree(); | |
| const yaw = useRef(0); | |
| const pitch = useRef(0); | |
| const tasten = useRef<Set<string>>(new Set()); | |
| useEffect(() => { | |
| camera.position.set(start.position[0], AUGENHOEHE, start.position[2]); | |
| yaw.current = 0; | |
| pitch.current = 0; | |
| }, [start.position[0], start.position[2]]); | |
| // Drag zum Umsehen (Maus & Touch); Doppeltipp = Schritt vorwärts. | |
| useEffect(() => { | |
| const el = gl.domElement; | |
| let ziehen = false; | |
| let lx = 0; | |
| let ly = 0; | |
| let letzterTipp = 0; | |
| const down = (e: PointerEvent) => { | |
| ziehen = true; | |
| lx = e.clientX; | |
| ly = e.clientY; | |
| const jetzt = performance.now(); | |
| if (jetzt - letzterTipp < 300) { | |
| const r = blickRichtung(yaw.current); | |
| camera.position.x += r[0] * 0.5; | |
| camera.position.z += r[1] * 0.5; | |
| } | |
| letzterTipp = jetzt; | |
| }; | |
| const move = (e: PointerEvent) => { | |
| if (!ziehen) return; | |
| yaw.current += (e.clientX - lx) * 0.005; | |
| pitch.current = Math.max(-1.4, Math.min(1.4, pitch.current - (e.clientY - ly) * 0.005)); | |
| lx = e.clientX; | |
| ly = e.clientY; | |
| }; | |
| const up = () => { | |
| ziehen = false; | |
| }; | |
| el.style.touchAction = "none"; | |
| el.addEventListener("pointerdown", down); | |
| el.addEventListener("pointermove", move); | |
| window.addEventListener("pointerup", up); | |
| return () => { | |
| el.removeEventListener("pointerdown", down); | |
| el.removeEventListener("pointermove", move); | |
| window.removeEventListener("pointerup", up); | |
| }; | |
| }, [gl, camera]); | |
| // WASD/Pfeiltasten (nur solange die Begehung montiert ist). | |
| useEffect(() => { | |
| const down = (e: KeyboardEvent) => tasten.current.add(e.key.toLowerCase()); | |
| const up = (e: KeyboardEvent) => tasten.current.delete(e.key.toLowerCase()); | |
| window.addEventListener("keydown", down); | |
| window.addEventListener("keyup", up); | |
| return () => { | |
| window.removeEventListener("keydown", down); | |
| window.removeEventListener("keyup", up); | |
| }; | |
| }, []); | |
| useFrame((_, delta) => { | |
| const t = tasten.current; | |
| const vor = | |
| (t.has("w") || t.has("arrowup") ? 1 : 0) - (t.has("s") || t.has("arrowdown") ? 1 : 0); | |
| const seit = | |
| (t.has("d") || t.has("arrowright") ? 1 : 0) - (t.has("a") || t.has("arrowleft") ? 1 : 0); | |
| if (vor !== 0 || seit !== 0) { | |
| const [dx, dz] = bewegungsDelta(blickRichtung(yaw.current), vor, seit, delta * 2.4); | |
| camera.position.x += dx; | |
| camera.position.z += dz; | |
| } | |
| camera.position.y = AUGENHOEHE; | |
| // Blickrichtung aus Yaw/Pitch: aus dem Zentrum heraus schauen. | |
| const richtung = new Vector3(0, 0, -1).applyEuler( | |
| new Euler(pitch.current, -yaw.current, 0, "YXZ"), | |
| ); | |
| lookAtDir(camera, richtung); | |
| }); | |
| return null; | |
| } | |
| /** Kamera in Blickrichtung `dir` ausrichten (dir muss nicht normiert sein). */ | |
| function lookAtDir(camera: Camera, dir: Vector3): void { | |
| const ziel = new Vector3().copy(camera.position).add(dir); | |
| camera.lookAt(ziel); | |
| } | |
| /** | |
| * Prozedurale Studio-Environment – komplett OFFLINE, ohne Netz-HDRI. | |
| * | |
| * Warum kein `<Environment preset=…>`: die drei-Presets laden HDRIs von | |
| * polyhaven/GitHub – auf dem HF-Space (strikte CSP, kein verlässliches Netz) | |
| * schlägt das fehl. Stattdessen rendert drei aus den `<Lightformer>`-Kindern | |
| * eine eigene kleine Umgebungs-Szene (einmalig, `frames={1}`) in eine | |
| * Cube-Map. Das gibt Chrom echte Reflexe und Glas Tiefe, ohne jeglichen | |
| * externen Asset. | |
| * | |
| * Lichtaufbau (Softbox-Studio): grosse warmweisse Deckenfläche als Hauptlicht, | |
| * zwei kühlere Seitenstreifen für plastische Kanten-Reflexe, dezenter warmer | |
| * Boden-Bounce. `background={false}` (Default): die Environment beleuchtet/ | |
| * spiegelt nur – der neutrale Canvas-Hintergrund bleibt, damit die Ampelfarben | |
| * klar lesbar bleiben. `resolution` klein gehalten (Performance-Wächter). | |
| */ | |
| function Studioumgebung() { | |
| return ( | |
| <Environment resolution={128} frames={1} environmentIntensity={0.55}> | |
| {/* Hauptlicht: grosse weiche Deckenfläche, warmweiss, von oben herab */} | |
| <Lightformer | |
| form="rect" | |
| intensity={1.3} | |
| color="#fff2e0" | |
| position={[0, 6, 0]} | |
| rotation={[Math.PI / 2, 0, 0]} | |
| scale={[14, 14, 1]} | |
| /> | |
| {/* Kühler Seitenstreifen links – plastische Kanten an Chrom/Glas */} | |
| <Lightformer | |
| form="rect" | |
| intensity={0.75} | |
| color="#dbe6ff" | |
| position={[-7, 2.5, 0]} | |
| rotation={[0, Math.PI / 2, 0]} | |
| scale={[9, 5, 1]} | |
| /> | |
| {/* Kühler Seitenstreifen rechts */} | |
| <Lightformer | |
| form="rect" | |
| intensity={0.75} | |
| color="#dbe6ff" | |
| position={[7, 2.5, 0]} | |
| rotation={[0, -Math.PI / 2, 0]} | |
| scale={[9, 5, 1]} | |
| /> | |
| {/* Dezenter, warmer Boden-Bounce (schwach) – füllt Unterseiten auf */} | |
| <Lightformer | |
| form="rect" | |
| intensity={0.3} | |
| color="#efe4d4" | |
| position={[0, -4, 0]} | |
| rotation={[-Math.PI / 2, 0, 0]} | |
| scale={[14, 14, 1]} | |
| /> | |
| </Environment> | |
| ); | |
| } | |
| // ── Bedienleiste ──────────────────────────────────────────────────────────── | |
| const PRESETS: [Ansichtspreset, string][] = [ | |
| ["perspektive", "Perspektive"], | |
| ["draufsicht", "Draufsicht"], | |
| ["front", "Front"], | |
| ["seite", "Seite"], | |
| ]; | |
| function knopfStil(aktiv: boolean, farbe: string = THEME.gruen): CSSProperties { | |
| return { | |
| borderRadius: 999, | |
| padding: "5px 11px", | |
| fontSize: 12, | |
| cursor: "pointer", | |
| border: `1px solid ${aktiv ? farbe : THEME.salbei}`, | |
| background: aktiv ? farbe : "#fff", | |
| color: aktiv ? "#fff" : THEME.salbei, | |
| }; | |
| } | |
| function Bedienleiste({ | |
| preset, | |
| onPreset, | |
| modus, | |
| onModus, | |
| ampel, | |
| onAmpel, | |
| waende, | |
| onWaende, | |
| deko, | |
| onDeko, | |
| dekoVerfuegbar, | |
| }: { | |
| preset: Ansichtspreset; | |
| onPreset: (p: Ansichtspreset) => void; | |
| modus: Begehungsmodus; | |
| onModus: (m: Begehungsmodus) => void; | |
| ampel: boolean; | |
| onAmpel: () => void; | |
| waende: boolean; | |
| onWaende: () => void; | |
| deko: boolean; | |
| onDeko: () => void; | |
| /** «Deko»-Knopf nur zeigen, wenn Scene-Dressing-Daten vorliegen. */ | |
| dekoVerfuegbar: boolean; | |
| }) { | |
| const trenner = ( | |
| <span | |
| style={{ width: 1, height: 20, background: THEME.salbei, opacity: 0.4, margin: "0 2px" }} | |
| /> | |
| ); | |
| const begehung = modus === "begehung"; | |
| return ( | |
| <div | |
| style={{ | |
| display: "flex", | |
| gap: 6, | |
| flexWrap: "wrap", | |
| padding: "0 0 8px", | |
| alignItems: "center", | |
| }} | |
| > | |
| {PRESETS.map(([p, label]) => ( | |
| <button | |
| key={p} | |
| type="button" | |
| onClick={() => onPreset(p)} | |
| style={knopfStil(preset === p && !begehung)} | |
| aria-pressed={preset === p && !begehung} | |
| disabled={begehung} | |
| > | |
| {label} | |
| </button> | |
| ))} | |
| {trenner} | |
| <button | |
| type="button" | |
| onClick={() => onModus("orbit")} | |
| style={knopfStil(!begehung)} | |
| aria-pressed={!begehung} | |
| > | |
| 🌀 Orbit | |
| </button> | |
| <button | |
| type="button" | |
| onClick={() => onModus("begehung")} | |
| style={knopfStil(begehung, THEME.orange)} | |
| aria-pressed={begehung} | |
| > | |
| 🚶 Begehung | |
| </button> | |
| {trenner} | |
| <button type="button" onClick={onAmpel} style={knopfStil(ampel)} aria-pressed={ampel}> | |
| Ampel | |
| </button> | |
| <button type="button" onClick={onWaende} style={knopfStil(waende)} aria-pressed={waende}> | |
| Wände | |
| </button> | |
| {dekoVerfuegbar && ( | |
| <button type="button" onClick={onDeko} style={knopfStil(deko)} aria-pressed={deko}> | |
| Deko | |
| </button> | |
| )} | |
| </div> | |
| ); | |
| } | |
| export function Viewer3D({ | |
| room, | |
| placements, | |
| catalog, | |
| gewaehltId, | |
| statusById, | |
| onSelect, | |
| stilprofil, | |
| plan, | |
| dressingItems, | |
| interaktiv = false, | |
| gewaehlteFlaeche, | |
| onSelectFlaeche, | |
| oberflaechenWahl, | |
| flaechen, | |
| farbWahl, | |
| modus, | |
| onModus, | |
| }: { | |
| room: Room; | |
| placements: Placement[]; | |
| catalog: KatalogItem[]; | |
| /** Voller Plan (für Scene-Dressing: Anker + Seed). Nur lesend genutzt. */ | |
| plan?: Plan | null; | |
| /** Scene-Dressing-Stammdaten des Raumtyps (rein visuelle Deko-Ebene). */ | |
| dressingItems?: DressingItem[]; | |
| gewaehltId: string | null; | |
| statusById: Map<string, Status>; | |
| onSelect: (id: string | null) => void; | |
| stilprofil?: Stilprofil | null; | |
| /** Flächenwahl (Oberflächen) aktiv. Möbel werden im 3D NICHT bearbeitet – | |
| * Verschieben/Drehen läuft nur im 2D-Grundriss (Bryan 2026-07-07). */ | |
| interaktiv?: boolean; | |
| /** Aktuell gewählte Oberfläche (Boden/Wand) – zeigt die Oberflächen-Karte. */ | |
| gewaehlteFlaeche?: FlaechenWahl | null; | |
| /** Klick auf Boden/Wand (kein Möbel getroffen) wählt die Fläche. */ | |
| onSelectFlaeche?: (f: FlaechenWahl | null) => void; | |
| /** Lokale, rein visuelle Oberflächen-Variantenwahl (überschreibt die Stil-Spez). */ | |
| oberflaechenWahl?: OberflaechenWahl | null; | |
| /** Flächen-Konzept des Kurators (Boden-/Wand-Material je Wand). Fehlt es | |
| * (Baseline/alte Pläne) → stilabgeleiteter Fallback, exakt wie bisher. */ | |
| flaechen?: FlaechenKonzept | null; | |
| /** Manuelle Farb-Overrides je placementId (Welle 3): MANUELL > KI > Default. */ | |
| farbWahl?: Record<string, string>; | |
| /** Begehungsmodus (in App gehalten, damit die Möbel-Pfeiltasten dort ruhen). */ | |
| modus: Begehungsmodus; | |
| onModus: (m: Begehungsmodus) => void; | |
| }) { | |
| const byId = new Map(catalog.map((c) => [c.id, c])); | |
| const bbox = raumBBox(room.shell.floor.polygon); | |
| const raumHoehe = | |
| (room.shell.walls[0] as { height?: number } | undefined)?.height ?? RAUMHOEHE_FALLBACK; | |
| const [preset, setPreset] = useState<Ansichtspreset>("perspektive"); | |
| const [ampel, setAmpel] = useState(true); | |
| const [waende, setWaende] = useState(true); | |
| const [deko, setDeko] = useState(true); | |
| // Deko rendern, sobald ein Plan (Anker + Seed) und Stammdaten vorliegen. | |
| const dressingAn = deko && !!plan && (dressingItems?.length ?? 0) > 0; | |
| const basis = leiteOberflaechen(stilprofil ?? null, room.roomType); | |
| const spez = wendeVariantenAn(basis, room.roomType, oberflaechenWahl); | |
| // Flächen-Konzept anwenden: Kurator-Material schlägt die Stil-/Varianten-Optik; | |
| // ohne `flaechen` bleiben bodenSpez/wandZonen exakt die stilabgeleitete Optik. | |
| const bodenSpez = loeseBodenSpez(spez.boden, flaechen); | |
| const wandZonen = loeseWandZonen(spez.wand, flaechen, room.shell.walls.length); | |
| // Raum-/Preset-Wechsel: Kamera-Pose neu berechnen; bboxKey erzwingt Reset. | |
| const bboxKey = `${bbox.cx.toFixed(2)}:${bbox.cz.toFixed(2)}:${bbox.breite.toFixed(2)}`; | |
| const orbitPose = presetKamera(bbox, preset, raumHoehe); | |
| const startPose = begehungStart(bbox); | |
| const flaecheKlick = | |
| interaktiv && onSelectFlaeche | |
| ? (f: FlaechenWahl, e: ThreeEvent<MouseEvent>) => { | |
| e.stopPropagation(); | |
| onSelectFlaeche(f); | |
| } | |
| : undefined; | |
| return ( | |
| <div style={{ display: "flex", flexDirection: "column", height: "100%", width: "100%" }}> | |
| <Bedienleiste | |
| preset={preset} | |
| onPreset={setPreset} | |
| modus={modus} | |
| onModus={onModus} | |
| ampel={ampel} | |
| onAmpel={() => setAmpel((a) => !a)} | |
| waende={waende} | |
| onWaende={() => setWaende((w) => !w)} | |
| deko={deko} | |
| onDeko={() => setDeko((x) => !x)} | |
| dekoVerfuegbar={!!plan && (dressingItems?.length ?? 0) > 0} | |
| /> | |
| {modus === "begehung" && ( | |
| <p style={{ fontSize: 11, color: THEME.salbei, margin: "0 0 6px" }}> | |
| Ziehen = umsehen · WASD/Pfeile = gehen · Doppeltipp = vorwärts | |
| </p> | |
| )} | |
| <div style={{ flex: 1, minHeight: 0 }}> | |
| <Canvas | |
| // dpr gedeckelt (≤2) + ACESFilmic-Tonemapping für ein wärmeres, weniger | |
| // flaches Bild; leichte Exposure-Anhebung. outputColorSpace bleibt der | |
| // r3f-Default (sRGB). Kein Post-Processing (bewusst schlank). | |
| dpr={[1, 2]} | |
| gl={{ toneMapping: ACESFilmicToneMapping, toneMappingExposure: 1.05 }} | |
| camera={{ position: orbitPose.position, fov: 50 }} | |
| onPointerMissed={() => { | |
| onSelect(null); | |
| onSelectFlaeche?.(null); | |
| }} | |
| > | |
| {/* Prozedurale Environment → echte Reflexe auf Chrom/Glas (offline). */} | |
| <Studioumgebung /> | |
| {/* Ambient dezenter (Environment liefert jetzt das Fülllicht); ein | |
| * gerichtetes Licht bleibt für scharfe Highlights/Modellierung. */} | |
| <ambientLight intensity={0.35} /> | |
| <directionalLight position={[4, 6, 3]} intensity={0.9} /> | |
| {/* Weicher Kontaktschatten unter den Objekten: EINE Depth-Pass-Textur | |
| * statt teurer Shadow-Maps je Licht – stabil & günstig für viele | |
| * kleine Möbel-Meshes, keine Bias-/Flacker-Probleme mit den | |
| * halbtransparenten Wänden. Auf Bodenhöhe zentriert. */} | |
| <ContactShadows | |
| position={[bbox.cx, 0.01, bbox.cz]} | |
| scale={Math.max(bbox.breite, bbox.tiefe, 2) + 1} | |
| resolution={1024} | |
| far={raumHoehe} | |
| blur={2.4} | |
| opacity={0.38} | |
| color="#243D35" | |
| /> | |
| <Boden | |
| room={room} | |
| boden={bodenSpez} | |
| gewaehlt={gewaehlteFlaeche === "boden"} | |
| onFlaeche={flaecheKlick} | |
| /> | |
| <Waende | |
| room={room} | |
| zonen={wandZonen} | |
| sichtbar={waende} | |
| gewaehlt={gewaehlteFlaeche === "wand"} | |
| onFlaeche={flaecheKlick} | |
| /> | |
| {placements.map((p) => { | |
| const item = byId.get(p.catalogItemId); | |
| if (!item) return null; | |
| return ( | |
| <PlacementBox | |
| key={p.id} | |
| placement={p} | |
| item={item} | |
| gewaehlt={p.id === gewaehltId} | |
| status={statusById.get(p.id)} | |
| ampelAn={ampel} | |
| manuellFarbe={farbWahl?.[p.id]} | |
| onClick={() => onSelect(p.id)} | |
| /> | |
| ); | |
| })} | |
| {dressingAn && plan && ( | |
| <DressingLayer3D | |
| room={room} | |
| plan={plan} | |
| catalog={catalog} | |
| styleProfile={stilprofil ?? null} | |
| dressingItems={dressingItems ?? []} | |
| sichtbar | |
| /> | |
| )} | |
| {modus === "orbit" ? ( | |
| <KameraSteuerung preset={preset} bboxKey={bboxKey} pose={orbitPose} /> | |
| ) : ( | |
| <Begehung start={startPose} /> | |
| )} | |
| </Canvas> | |
| </div> | |
| </div> | |
| ); | |
| } | |