import { Canvas, useThree } from "@react-three/fiber"; import axios from "axios"; // import { EffectComposer } from "@react-three/postprocessing"; import DoorHole from "./logic/DoorHole"; import { Suspense, useState, useEffect } from "react"; import Preloader from "./logic/preloader"; import Door from "./logic/UI/door"; import Design from "./logic/UI/design"; import Information from "./logic/UI/information"; import * as THREE from "three"; import { MyContext } from "./logic/data/contextapi"; import Extra from "./logic/UI/extra"; import Samenstling from "./logic/UI/samenstling"; import Arrow from "./logic/UI/arrow"; import { DirectionalLightHelper, CameraHelper } from "three"; import React, { useRef } from "react"; export default function Endpoint() { const [json, setJson] = useState({ Data: [] }); const [step, setStep] = useState("door"); const [type, settype] = useState("Taatsdeur"); const [door, setdoor] = useState("3panel"); const [frameSize, setFrameSize] = useState(0.125); const [glassType, setGlassType] = useState(0x111111); const [frameType, setFrameType] = useState( "./images/doortypes/RAL 9005 fijn structuur.png" ); const [width, setWidth] = useState(90); // State for width const [height, setHeight] = useState(250); // State for height const [holeWidth, setHoleWidth] = useState(90); const [doorConfig, setDoorConfig] = useState("enkele"); const [sidePannel, setSidePannel] = useState("geen"); const [sidePannelConfig, setSidePannelConfig] = useState("eigen maat"); const [sidePannelSize, setSidePannelSize] = useState(width); const [stalenType, setStalenType] = useState("tussen"); const [stalenPart, setStalenPart] = useState(1); const [handle, setHandle] = useState(1); const [maxWidth, setMaxWidth] = useState(105); const [prwType, setPrwType] = useState("Enkele"); const [prwImage, setPrwImage] = useState( "./images/doortypes/enkele deur.png" ); const [extraOptions, setExtraOptions] = useState([ "Meetservice", "Montage service", ]); const [count, setCount] = useState(1); const [coverSheetSteel, setCoverSheetSteel] = useState(false); const [coverLearn, setCoverLearn] = useState(false); const [coverWoodliness, setCoverWoodliness] = useState(false); const [coverMirrors, setCoverMirrors] = useState(false); const [coverCylinderLockKey, setCoverCylinderLockKey] = useState(false); const [coverDontKnow, setCoverDontKnow] = useState(false); const [handleSheetSteel, setHandleSheetSteel] = useState(false); const [handleLearn, setHandleLearn] = useState(false); const [handleWoodliness, setHandleWoodliness] = useState(false); const [handleMirrors, setHandleMirrors] = useState(false); const [handleCylinderLockKey, setHandleCylinderLockKey] = useState(false); const [standardBlack, setStandardBlack] = useState(false); const [alternativeRALColour, setAlternativeRALColour] = useState(false); const [metallicCoating, setMetallicCoating] = useState(false); const [bright, setBright] = useState(false); const [canaleOrCrepi, setCanaleOrCrepi] = useState(false); const [fireResistant, setFireResistant] = useState(false); const [outdoorPlacement, setOutdoorPlacement] = useState(false); const [maxHeight, setMaxHeight] = useState(0); const [contentHeight, setContentHeight] = useState("calc(100vh - 320px)"); const [open, setOpen] = useState(false); const [inprogress, setInprogress] = useState(false); const [bubbles, setBubbles] = useState(); const [attachDesign, setAttachDesign] = useState(null); const [colorPickerOpened, setColorPickerOpened] = useState(false); const [customFrameType, setCustomFrameType] = useState({name: "", color: ""}); const [compositionImage, setCompositionImage] = useState("https://config.livingsteel.nl/images/doortypes/3%20panel.png"); const [glContext, setGlContext] = useState(null); const [sceneContext, setSceneContext] = useState(null); // Store the Scene context const [cameraContext, setCameraContext] = useState(null); // Store the Camera context // Calculate the maximum height based on the available screen height useEffect(() => { const userAgent = navigator.userAgent || navigator.vendor || window.opera; const isAndroid = /android/i.test(userAgent); const isIOS = /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream; const calculateMaxHeight = () => { let availableHeight; if (window.innerWidth > 800) { const screenHeight = window.innerHeight; // Adjust maxHeight to leave space for other elements like headers or footers availableHeight = screenHeight - 100; // Adjust this value as needed } else { setContentHeight( `calc(100vh - 25vh - ${isAndroid ? "270px" : "310px"})` ); const screenHeight = window.innerHeight * 0.65; // Adjust maxHeight to leave space for other elements like headers or footers 30 availableHeight = screenHeight + 210; // Adjust this value as needed } setMaxHeight(availableHeight); }; fetchBubbles(); calculateMaxHeight(); // Call once initially window.addEventListener("resize", calculateMaxHeight); // Recalculate on window resize return () => { window.removeEventListener("resize", calculateMaxHeight); // Cleanup }; }, []); const fetchBubbles = async () => { try { const response = await axios.get( "https://api.config-fencing.com/api/get-bubbles" ); setBubbles(response.data.bubbles); } catch (error) { console.error("Error fetching bubbles:", error); } }; // Create a ref for the SpotLight const spotLightRef = useRef(); return ( <>
}> { setGlContext(gl); setSceneContext(scene); setCameraContext(camera); }} // shadows // Enable shadows > {/* Ambient light for basic illumination */}
{/* Prijs incl. BTW */} {/*
{ setStep("door"); }} > € 2200,00
*/}
{ setStep("door"); }} > { setStep("door"); }} > DEURMAAT & TYPE
setStep("door")} className={`radio ${ step === "door" ? "expand" : "collapsed" }`} /> {/* */}
{ setStep("samenstling"); }} > { setStep("samenstling"); }} > Samenstelling
setStep("samenstling")} className={`radio ${ step === "samenstling" ? "expand" : "collapsed" }`} />
{ setStep("design"); }} > { setStep("design"); }} > Design, Kleur & GLAS
setStep("design")} className={`radio ${ step === "design" ? "expand" : "collapsed" }`} />
{ setStep("extra"); }} > { setStep("extra"); }} > Extra Opties
setStep("extra")} className={`radio ${ step === "extra" ? "expand" : "collapsed" }`} /> {/* */}
{ setStep("information"); }} > { setStep("information"); }} > Order informatie
setStep("information")} className={`radio ${ step === "information" ? "expand" : "collapsed" }`} /> {/* */}
); }