Dwinzo_Demo/app/src/modules/scene/scene.tsx

import { useEffect, useMemo } from "react";
import { Canvas } from "@react-three/fiber";
import { KeyboardControls } from "@react-three/drei";
import { useSceneContext } from "./sceneContext";

import Builder from "../builder/builder";
import Visualization from "../visualization/visualization";
import Setup from "./setup/setup";
import Simulation from "../simulation/simulation";
import Collaboration from "../collaboration/collaboration";
import useModuleStore from "../../store/ui/useModuleStore";
import { useParams } from "react-router-dom";
import { getUserData } from "../../functions/getUserData";
import { useLoadingProgress } from "../../store/builder/store";
import { useSocketStore } from "../../store/socket/useSocketStore";
import { Color, SRGBColorSpace } from "three";
import { compressImage } from "../../utils/compressImage";
import { ALPHA_ORG } from "../../pages/Dashboard";

export default function Scene({ layout }: { readonly layout: "Main Layout" | "Comparison Layout" }) {
    const map = useMemo(
        () => [
            { name: "forward", keys: ["ArrowUp", "w", "W"] },
            { name: "backward", keys: ["ArrowDown", "s", "S"] },
            { name: "left", keys: ["ArrowLeft", "a", "A"] },
            { name: "right", keys: ["ArrowRight", "d", "D"] },
            { name: "jump", keys: ["Space"] },
        ],
        []
    );
    const { assetStore, layoutType } = useSceneContext();
    const { assets } = assetStore();
    const { userId, organization } = getUserData();
    const { projectId } = useParams();
    const { projectSocket } = useSocketStore();
    const { activeModule } = useModuleStore();
    const { loadingProgress } = useLoadingProgress();

    useEffect(() => {
        if (!projectId || loadingProgress !== 0) return;
        const canvas = document.getElementById("sceneCanvas")?.getElementsByTagName("canvas")[0];
        if (!canvas || !(layoutType === "default" || (layoutType === "useCase" && organization === ALPHA_ORG))) return;
        compressImage(canvas.toDataURL("image/png")).then((screenshotDataUrl) => {
            const updateProjects = {
                projectId,
                organization,
                userId,
                thumbnail: screenshotDataUrl,
            };
            if (projectSocket) {
                projectSocket.emit("v1:project:update", updateProjects);
            }
        });
        // eslint-disable-next-line
    }, [activeModule, assets, loadingProgress, projectId, layoutType]);

    return (
        <KeyboardControls map={map}>
            <Canvas
                id="sceneCanvas"
                shadows
                color="#aaaa"
                eventPrefix="client"
                onContextMenu={(e) => {
                    e.preventDefault();
                }}
                performance={{ min: 0.9, max: 1.0 }}
                onCreated={(e) => {
                    e.scene.background = layout === "Main Layout" ? null : new Color(0x19191d);
                }}
                gl={{ outputColorSpace: SRGBColorSpace, powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
            >
                <Setup />
                <Collaboration />
                <Builder />
                <Simulation />
                <Visualization />
            </Canvas>
        </KeyboardControls>
    );
}